码迷,mamicode.com
首页 > Web开发 > 详细

JS中event事件

时间:2017-11-20 15:09:52      阅读:181      评论:0      收藏:0      [点我收藏+]

标签: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

 

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

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

        {

             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);

             }

            

               

        };

     </script>

   </head>

   <body>

  

   </body>

</html>

 

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

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

 

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

 

 

事件冒泡例子:代码如下

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

        div{

           padding:50px;

        }

       

     </style>

   </head>

   <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>

    

   </body>

</html>

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

 

3.键盘事件

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

用法代码:

   <script>  

        document.onkeydown=function(ev)

        {

           var oEvent=ev||event;

           alert(oEvent.keyCode);

        }

   </script>

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

 

 

 

 

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

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

        {

           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=‘‘

             }

            

           }

        }

       

     </script>

   </head>

   <body>

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

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

    

   </body>

</html>

 

 

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

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

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

 

keyCode其他属性

ctrlKeyshiftKeyaltKey

 


本文出自 “新网学会博客” 博客,请务必保留此出处http://xwxhvip.blog.51cto.com/13020757/1983467

JS中event事件

标签:js中event事件

原文地址:http://xwxhvip.blog.51cto.com/13020757/1983467

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!