天天看点

JS中event事件

JS事件基础

1.event对象

(1)用来获取事件的详细信息:鼠标位置、键盘位置

document的本质:document.childNodes[0].tagName

例子:获取鼠标位置:clientX横坐标,clientY纵坐标

代码如下:

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

        {

             document.onclick=function()

             {

             alert(event.clientX+','+event.clientY);

             }

        }

     </script>

   </head>

   <body>

   </body>

</html>

以上代码会有兼容问题

alert(event.clientX+','+event.clientY);大部分适合IE

把上面代码换成alert(ev.clientX+','+ev.clientY);适用于火狐,不支持IE

现在怎么解决兼容问题呢?代码如下

             document.onclick=function(ev)

             //alert(event.clientX+','+event.clientY);适用于IE

             //alert(ev.clientX+','+ev.clientY);//适用于火狐

                var oEvent=ev||event;//报错ev不存在

                alert(oEvent.clientX+','+oEvent.clientY);

        };

以上总结出解决event对象的兼容性方法就是

设置一个变量 var oEvent=en||event

2事件冒泡:   事件冒泡就是会把事件一直传递给父级,一直到document,小知识document是一个隐藏起来的最大父级

事件冒泡例子:代码如下

     <style>

        div{

           padding:50px;

     </style>

   <body onclick="alert('aa')">

   这个例子就是说明子级的事件会传递给父级,这就是事件冒泡

     <div style="background:black;" onclick="alert(this.style.background)">

        <div style="background:green;" onclick="alert(this.style.background)">

           <div style="background:red; "onclick="alert(this.style.background)"></div>

        </div>

     </div>

执行上面代码点击一下最里面的红色就懂了

3.键盘事件

KeyCode:获取用户按下键盘的哪个按键

用法代码:

   <script>  

        document.onkeydown=function(ev)

           var oEvent=ev||event;

           alert(oEvent.keyCode);

   </script>

执行以上代码随便按下某个键就会报出数字,这个数字就对应这个按键

例子2:如何使用按键回车提交某个信息

           var oBun1=document.getElementById('bu1');       

           var oBun3=document.getElementById('text1')

           oBun1.onkeydown=function(ev)

           { 

             var oEvent=ev||event;

             if(event.keyCode==13)

                oBun3.value=oBun3.value+oBun1.value;

                oBun1.value=''

           }

     <input id="bu1" type="text" />    

     <textarea id="text1" rows="10" cols="40"></textarea>

还有如何使用ctry+回车提交

只需要把如上代码if部分改为

if(event.keyCode==13 || oEvent.ctrlkey)

keyCode其他属性