文档章节

JS的事件监听机制

烧肉啊
 烧肉啊
发布于 2015/12/16 14:00
字数 823
阅读 4
收藏 0

JS的事件监听机制

很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获)

后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套自己的规则(事件冒泡)

再后来,有个叫W3C的媒婆,想撮合这两个孩子,将他们的特点融合在了一起,这下,事件产生的顺序变成:

事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”;
执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“冒泡阶段(Bubble)”。

 

 

善良的Netscape以及其姐妹们都接受了媒婆的建议,采用了新的事件规则,而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。那么,怎么绑定事件呢?

由于这两派浏览器的差异,其绑定的方法也不一样,其中,遵循标准的浏览器使用W3C定义的addEventListener函数绑定,函数定义如下:

function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
eventFlag : 事件名称,如click、mouseover…
eventFunc: 绑定到事件中执行的动作
useCapture: 指定是否绑定在捕获阶段,true为是,false为否,默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流

 

IE中使用自有的attachEvent函数绑定时间,函数定义如下:
function attachEvent(string eventFlag, function eventFunc)
eventFlag: 事件名称,但要加上on,如onclick、onmouseover…
eventFunc: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流

总结:addEventListener(string eventFlag, function eventFunc, [bool useCapture=false]),针对ff,chrome,safari浏览器,false指冒泡阶段,默认为true,指捕获阶段。不过一般我们都用false。

 attachEvent(string eventFlag, function eventFunc),针对ie系列、还有opera浏览器,少了事件处理机制的参数,只指定事件类型(别忘了on)和触发哪个函数。

 

有了这些认知之后,有了大致的思路,对应的代码:

if(document.addEventListener){

document.addEventListener('click', hideBox, false);

在document绑定信息框(竖的那个)隐藏函数(即随便点html页面的哪里关闭展开的信息框,这也是使用document.addEventListener的原因,要帮在文档上)

document.getElementById('status_hide').addEventListener('click', showBox, false);

在status_hide节点绑定信息框展开(详细的那个)函数并停止事件流(即点击竖的这个,展开详细的那个)

document.getElementById('status_show').addEventListener('click', stopEvent, false);

因为false确定的是事件冒泡,为了防止点详情的时候,向上冒泡到document,触发document设置的click时hidebox方法,在status_show我们要绑定阻止事件流函数。

}

这个明白了,针对ie再写个attachEvent的就可以了,当然ie的参数只用2个就可以了,它的时间处理机制就是冒泡不用额外设置。

本文转载自:http://www.cnblogs.com/aji88/archive/2012/07/20/2600492.html

共有 人打赏支持
烧肉啊
粉丝 0
博文 15
码字总数 11317
作品 0
丽水
私信 提问
总结:JavaScript异步、事件循环与消息队列、微任务与宏任务

前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: “JavaScript 是单线程、异步、非阻塞、解释型脚本语言。” 单线...

正伟_
11/12
0
0
『前端干货篇』: 你不知道的Event Loop

一星期的满课,身心疲惫(×_×)...周末闲下来,仔细研究了下JS的事件轮询机制,看了看阮一峰大大的相关文章,真的收货挺多。 从一道面试题说起 相信这道题很多人都看过,结果是先输出,再输出...

酱菜豪
10/30
0
0
豆瓣发布跨平台的桌面应用框架,意在web3.0?

豆瓣发布跨平台的桌面应用框架OneRing. 框架目标 OneRing是一个跨平台的桌面应用框架。和Adobe AIR类似,它支持用html/js/css制作用户界面,与之不同的是,它的应用为本地程序,可以直接访问...

renwofei423
2010/09/25
2.7K
6
JavaScript线程机制与事件机制

一、进程与线程 1.进程 进程是指程序的一次执行,它占有一片独有的内存空间,可以通过windows任务管理器查看进程(如下图)。同一个时间里,同一个计算机系统中允许两个或两个以上的进程处于并行...

浪里行舟
10/11
0
0
js中onerror事件的执行机制

js中产生异常时会产生onerror事件,这时可以给他加监听函数func(),来处理错误信息。 我的问题是:如果监听函数func()里也有错误,js的内部是如何处理的?我具体试过,并不会产生死循环,下...

为往圣继绝学
2012/03/29
2.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
10
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
16
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
15
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
8
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部