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

 

本文转自

新网学会 51CTO博客,原文链接:http://blog.51cto.com/xwxhvip/1983467 ,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript 前端开发
js事件队列
js事件队列
137 55
|
1月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
30 2
|
2月前
|
JavaScript 前端开发
javascript中常用的事件
这篇文章列出并演示了JavaScript中常用的DOM事件,包括失去焦点、获得焦点、鼠标点击、键盘事件等,并展示了如何通过直接在HTML标签中使用事件句柄和通过JavaScript为元素添加事件监听器两种方式来注册事件。
|
2月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
33 0
|
13天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
14 5
|
14天前
|
监控 JavaScript 前端开发
|
1天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
|
1天前
|
JavaScript 前端开发 Android开发
JavaScript触摸touch事件
JavaScript触摸touch事件
|
1天前
|
JavaScript 前端开发 UED
JavaScript 计时事件
JavaScript 计时事件
6 0
|
1天前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件