1、事件的三个阶段
捕获 目标 冒泡
低版本IE(IE8及以下版本)不支持捕获阶段
捕获事件流:Netscape提出的事件流,即事件由页面元素接收,主机箱下,传播到最具体的元素
冒泡事件流:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面
2、IE和W3C不同绑定事件解绑事件的方法有什么区别,参数是什么,以及事件对象ev有什么区别
W3C:target.addEventListener(event,listener,useCapture);
event——事件类型;
listener——事件触发时执行的函数;
useCapture——指定时间是否再补货或冒泡阶段执行,为true时事件句柄在捕获阶段执行,为false(默认false)时,事件句柄在冒泡阶段执行。
例:
btn.addEventListener('click',function(){
//do something...
},false);
对应的事件移除:
removeEventListener(event,function,capture/bubble);
例:
removeEventListener(event,function,capture/bubble);
IE:target.attacEvent(type,listener);
type——字符串,事件名称,含"on",比如"onclick","onmouseover"等。
listener——实现了EventListener接口或者是JavrScript中的函数。
例:
btn.attachEvent('onclick',function(){
//do something...
})
对应的事件移除:
detachEvent(event,function);
目前支持以addEventListener绑定事件的浏览器:FF、Chrome、Safari、Opera、IE9-11
目前支持以attachEvent绑定事件的浏览器:IE6-10
阻止:
通过stopPropagation()或cancelBubble来阻止事件向下一级元素传递。
cancelBubble是IE标准下阻止事件传递的属性,设置cancelBubble=true表示阻止冒泡
3、【事件的代理/委托】的原理以及优缺点
原理:靠事件的冒泡机制来实现的
优点:
1.可以大量节省内存占用,减少事件注册,比如在table上代理所有td的click事件就非常棒
2.可以实现当新增子对象时无需再次对其绑定事件,对于动态内容部分尤为合适
缺点:
事件代理的应用常用应该仅限于上述需求下,如果把所有事件都代理就可能会出现事件误判,即本不应用触发事件的被绑上了事件(有人把页面里所有的时间都绑定到document用委托的,只是及其不智的做法)
4、实现事件代理,要求兼容浏览器(考核对事件对象ev的了解程度,以及在IE下对应的属性名)
用target,currentTarget,以及IE下的srcElement和this(说完这些可略过了)
5、实现事件模型
即写一个类或是一个模块,有两个函数,一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对末一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数。
(这个需求如果对于做过C#的人来讲就再熟悉不过,他根本就是C#中的【委托】(delegate)。而委托与事件几乎是一家子。回到前面说的题目,大致实现思路就是创建一个类或是匿名函数,在bind和trigger函数外层作用域创建一个字典对象,用于存储注册的事件及响应函数列表,bind时,如果字典没有则创建一个,key是事件名称,value是数组,里面放着当前注册的响应函数,如果字段中有,那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可)
6、事件广播(dispatchEvent)
一般在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这时可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。