说到事宜机制起首要说一下事宜模子
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。下次再挪用的时刻函数被重写,不会再做检测。