说到事件机制首先要说一下事件模型
1.原始事件模型
在原始事件模型中,事件是不会传播,只是触发立即执行,函数会作为元素的属性被监听。
<div class="box" onclick="show()"></div>这种方式和这种方式document.querySelector(".box");
这种时间模型有着明显的缺点:同一事件无法绑定多个,无法传播不能应用事件委托.
2.DOM2模型即2级DOM事件模型
w3c规定的标准事件模型,高版本浏览器基本遵循着一标准(gtmd ie)
事件模型中一次事件包含3个过程
事件捕获阶段:事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数,若有则执行。
(什么捕获,神奇的ie我是不知道,你说什么反正我是听不到的,哥是最屌的,gtmd ie)ie低版本没有捕获事件处理阶段:事件到达目标元素,执行目标元素的事件处理函数.
-
事件冒泡阶段:事件从目标元素上升一直到达document,同样依次检查经过的节点是否注册了该事件的监听函数,有则执行。
w3c标准函数绑定 function addEventListener(string eventFlag, function eventFunc,
useCapture)
其中useCapture是否绑定在捕获阶段,true表示采取捕获方式,false表示采取冒泡方式。
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<style>
div{
height:100px;
width:100px;
background:red
}
</style>
<script>
window.onload=function(){
var oF=document.querySelector('.father'),
oS=document.querySelector('.son');
// 捕获 console 结果 1 2 因为这里采用的是捕获模式,
// 从document往oF走依次发现oF 和oS都有注册捕获事件于是便触发了,
// 然后冒泡,没找到冒泡事件,不执行任何操作
oF.addEventListener('click',function(){
console.log(1+'捕获');
},true);
oS.addEventListener('click',function(){
console.log(2+"捕获");
},true);
// 冒泡 console 结果 2 1 因为这里采用的是冒泡
// 模式,没有捕获,开始冒泡
oF.addEventListener('click',function(){
console.log(1+"冒泡");
},false);
oS.addEventListener('click',function(){
console.log(2+"冒泡");
},false);
//
oF.addEventListener('click',function(){
console.log(1+"冒泡");
},false);
oS.addEventListener('click',function(){
console.log(2+"捕获");
},true);
}
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
节点既绑定了冒泡事件也绑定了捕获事件,此时的执行顺序按照绑定的先后顺序执行。
因为ie用自有的attachEvent函数绑定,所以监听的时候需要做兼容,为了方便封装一下吧。
if (element.addEventListener) {
element.addEventListener(type, fun, false);
}
else if(element.attachEvent){
element.attachEvent('on' + type, fun);
}
else{
element['on' + type] = fun;
}
}```
最近看了惰性函数的相关,同一个应用环境中,其实只需要检测一次即可。
if (element.addEventListener) {
addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else{
addEvent = function (type, element, fun) {
element['on' + type] = fun;
}
}
}```
第一次调用addEvent对浏览器做能力检测,然后重写addEvent。下次再调用的时候函数被重写,不会再做检测。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。