JS中event事件-阿里云开发者社区

开发者社区> 技术小牛人> 正文

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 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较
原文:C#.NET使用Task,await,async,异步执行控件耗时事件(event),不阻塞UI线程和不跨线程执行UI更新,以及其他方式比较 使用Task,await,async,异步执行事件(event),不阻塞UI线程和不跨线程执行UI更新   使用Task,await,async 的异步模式 去执行事件(event) 解决不阻塞UI线程和不夸跨线程执行UI更新报错的最佳实践,附加几种其他方式比较 由于是Winform代码和其他原因,本文章只做代码截图演示,不做界面UI展示,当然所有代码都会在截图展示。
3332 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10077 0
【MySQL】事件调度器 (Event Scheduler)
 一 event 介绍         事件调度器是定时触发执行的,在这个角度上也可以称作是"临时的触发器"。触发器只是针对某个表产生的事件执行一些语句,而事件调度器则是在某一个(间隔)时间执行一些语句。
721 0
Node.js 事件循环
Node.js 事件循环 Node.js 是单进程单线程应用程序,但是因为 V8 引擎提供的异步执行回调接口,通过这些接口可以处理大量的并发,所以性能非常高。 Node.js 几乎每一个 API 都是支持回调函数的。
944 0
Linux--内核Uevent事件机制 与 Input子系统【转】
转自:http://blog.csdn.net/lxl584685501/article/details/46379453   [-] 一Uevent机制 Uevent在kernel中的位置 Uevent的内部逻辑解析 二Input子系统  从应用层的角度出发看input子系统 输入设备上报事件的处理过程 通过设备节点读取输入事件 通过设备节点写入输入事件 总结   一、Uevent机制 1.前提摘要 (1)Sysfs文件系统          内核设备模型主要的模块和用户之间能看到的相关部分就是sysfs文件系统了。
1552 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13884 0
nodejs的事件处理机制以及事件环机制
nodejs的事件处理机制以及事件环机制 ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。
1311 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载