2016年5月27日下午(妙味课堂js基础-3笔记三(事件))

时间:2022-10-26 11:51:36

一、默认行为

  1. 什么是事件的默认行为(默认事件)

    (1)浏览器不需要我们去编写,浏览器自身就已经具备的功能;(点击右键弹出页面菜单)

    (2)如何阻止默认行为

  2. 上下文菜单:oncontextmenu(右键菜单)

<script type="text/javascript">
        document.oncontextmenu=function () {
            alert("a")
        };
    </script>

  点击右键就会弹出a,且会出现右键菜单;

<script type="text/javascript">
        document.oncontextmenu=function () {
            return false;
        };
    </script>

  已经阻止了右键菜单,点击无法弹出。

  再来看一下一个阻止表单提交的实例:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
        window.onload=function ()
        {
            var oForm=document.getElementById('form1');
            oForm.onsubmit=function ()
            {
                return false; };
        };
    </script>
</head>
<body>
    <form id="form1" action="http://www.miaov.com/">
        <input type="submit" />
    </form>
</body>

  无论怎么点击提交按钮都无法提交网址。这里就有关于表单校验了。

  3. 文本框内禁止输入内容实例(阻止onkeydown)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oTxt=document.getElementById('txt1');
        oTxt.onkeydown=function ()
        {
            return false; };
    };
    </script>
</head>
<body>
    <input id="txt1" type="text" />
</body>

   这个实例在输入框中间无法输入字母,但是可以输入汉字(why?)

  4. 自定义右键菜单实例

<head>
    <style type="text/css">
    * {margin:0; padding:0;}
    #ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;}
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
        document.oncontextmenu=function (ev)
        {
            var oEvent=ev||event;
            var oUl=document.getElementById('ul1');

            oUl.style.display='block';
            oUl.style.left=oEvent.clientX+'px';
            oUl.style.top=oEvent.clientY+'px';
            return false;            //让系统的右键菜单消失
        };
        document.onclick=function ()
        {
            var oUl=document.getElementById('ul1');
            oUl.style.display='none';                          //点击页面就消失;
        };
    </script>
</head>
<body>
    <ul id="ul1">
        <li>登陆</li>
        <li>回到首页</li>
        <li>注销</li>
        <li>加入VIP</li>
    </ul>
</body>

  5. 只能输入数字的输入框实例:onkeydown、onkeyup

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
        window.onload=function ()
        {
            var oTxt=document.getElementById('txt1');
            oTxt.onkeydown=function (ev)
            {
                var oEvent=ev||event;
                if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
                {
                    return false;
                }
            };
        };
    </script>
</head>
<body>
    <input id="txt1" type="text" />
</body>

 

二、拖拽

  6. 拖拽实例:拖拽原理、三个事件、document范围、解决FF的bug


  7. 限制拖拽范围的条件:document.documentElement.clientWidth