博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript事件处理
阅读量:6423 次
发布时间:2019-06-23

本文共 1555 字,大约阅读时间需要 5 分钟。

hot3.png

一、事件传播方式

      他们是描述事件触发时序问题的术语,绑定事件方法(事件委托:addEventListener)的第三个参数,就是控制事件触发顺序的类型。true=事件捕获,false=事件冒泡。默认false,即事件冒泡

1. 冒泡

是自下而上的去触发事件,addEventListener(,,false):第三个参数为false。

2. 捕捉

是从document到触发事件的那个节点,即自上而下的去触发事件。addEventListener(,,true):第三个参数为true。

二、注册事件方法:

1. JavaScript原生方式

        

2. JQuery方式

1. $('#btn').click(callback);2. $('#btn').bind('click',callback);

3. 鼠标事件

    
鼠标事件
事件
自定义邮件菜单

4. 滚动条事件

    
滚动条事件

5. 键盘事件

                

    
键盘事件
您尝试敲击一下键盘

6. 自定义事件---右滑

 

关于自定义事件,本来还在纠结 一条原生事件从物理层鼠标到一个网页的定义过程?有些钻牛角尖!后来研究了一点安卓系统之后就满足了。

举个例子:我们现在是在一个安卓手机打开谷歌浏览器访问一个网页,点击了一个按钮,由此引发一个点击事件:

1. 物理层-手机屏幕上的传感器:感知了一个按压状态

2. Android系统(触摸)驱动:把这个按压状态定义成 一组二进制码值,并把它转译成Android Linux内核的码值(scancode)。

3. Android系统接收到scancode之后,又把它转成Android系统能识别的keycode,然后在framework层针对这个keycode写一个广播分发出去,到这里写过Android apk的同学就能理解了,他在写APK的时候可以不用Android SDK提供的事件类型,可以直接通过特定的API 获取到这个点击事件的keycode或者对应的广播消息,然后写相关的响应函数。

4. 我们Android手机上的谷歌浏览器也是一个APK。所以到这里这个点击事件就这样传到了浏览器。通过浏览器APK的再一次转义或者里边的webkit直接在Android底层获取到了点击事件的信息码值。然后它再一次转译成标准的的W3C事件“名称”。这样在最上层统一形成了W3C DOM标准之后,开发者便能统一使用了。

所以对于web开发者来说,就无需关心原生的事件如何产生了。只需要知道浏览器转义后的最后一层,W3C 的DOM事件标准即可,它对应的就是浏览器能支持的“最原生”事件了!

        自定义事件不是让开发者去自定义“原生”事件,那是浏览器和webkit要做的事情(当然浏览器定义的事件也不是最“原生”事件,因为它也是接收来自系统层的事件,并转换,自定义成自己的事件)。

        所以自定义事件是让开发者在W3C 标准“原生”事件的基础上进行组合逻辑,封装成更加简单的事件。《JavaScript 高级程序设计》第三版书中P13也有描述:自定义事件不是由DOM原生触发的。

7. event对象

在遵循 W3C 规范的浏览器中,event 对象通过事件处理函数的参数传入。

语法:
elementObject.OnXXX=function(e){
    var eve=e; // 声明一个变量来接收 event 对象

转载于:https://my.oschina.net/u/3697586/blog/1547787

你可能感兴趣的文章
Mac下用Jenkins自动打包成.ipa发布到蒲公英
查看>>
网络问题排查
查看>>
Openssl加密解密应用
查看>>
调用 LoadLibraryEx 失败,在 ISAPI 筛选器 "D:\Tomcat7\iis\isapi_redirect.dll" 上
查看>>
Python--小题练习
查看>>
搭建LAPM环境
查看>>
redis 集群
查看>>
Java、Web工程师发展——路在何方?
查看>>
Photoshop脚本 > 使用脚本创建一个新文档
查看>>
java(十)return
查看>>
Redhat 5 中裸设备(raw) 的配置
查看>>
5年运维经验分享:一个小白走向高级运维工程师之路
查看>>
ios网络判断的方式
查看>>
Centreon 的 yum 源
查看>>
Yii2.0 API实例
查看>>
移动社交广告价值显现,腾讯之后,陌陌开始捞金
查看>>
Producer和Consumer
查看>>
MySQL数据库优化法则总结
查看>>
ceph
查看>>
“android 推送”存在的问题
查看>>