JS的事件监听与委托机制
JS的事件监听机制
小故事:
很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获)
后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套自己的规则(事件冒泡)
再后来,有个叫W3C的媒婆,想撮合这两个孩子,将他们的特点融合在了一起,这下,事件产生的顺序变成:
事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”;
执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“冒泡阶段(Bubble)”。
善良的Netscape以及其姐妹们都接受了媒婆的建议,采用了新的事件规则,而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。那么,怎么绑定事件呢?
由于这两派浏览器的差异,其绑定的方法也不一样,其中,遵循标准的浏览器使用W3C定义的addEventListener函数绑定,函数定义如下:)
function addEventListener(event, function,bool)
event: 事件名称,如click、mouseover…(记得加引号)
function: 绑定到事件中执行的动作
bool: 指定是否绑定在捕获阶段,true为是(捕获),false为否(冒泡),默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流
(兼容IE)
IE中使用自有的attachEvent函数绑定时间,函数定义如下:
function attachEvent(event, function)
event: 事件名称,但要加上on,如onclick、onmouseover…
function: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cacenlBubble=false来阻止事件继续往下流
什么是冒泡和捕获呢?
在冒泡中,内部元素的事件会先被触发,然后再触发外部元素,即:
元素的点击事件先触发,然后会触发
在捕获中,外部元素会先被触发,然后才会触发内部元素的事件,即:
JS的事件委托机制
一 事件委托原理:把原本要加给多个子元素的相同事件,我们直接把这个事件加给他们共同的父元素。利用事件的冒泡原理,配合事件源找到真正的触发的子元素。
二:事件委托的好处:
1.节省了性能(只给他的父元素加事件减少DOM的操作)
2.可以给页面上暂时不存在的元素加事件
三: 事件监听的实现:
1.event对象提供的target属性,可以返回真正的目标节点也就是触发的事件源
2.target的兼容写法:var target = ev.target || ev.srcElement
3.this和target:在事件监听中一般不会使用this,this在事件监听中指的事件源而不是真正的所点击的触发事件源的节点,target属性可以返回真正的目标节点也就是触发的事件源
演示代码:
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li> //li是可以暂时不存在,后面渲染添加,但是他的事件可以提前添加
</ul>
<script>
var ulobj=document.querySelector('.box');
ulobj.onclick=function(event){
var e=event || window.event;
var target=e.target|| e.srcElement;
if(target.nodeName == 'LI'){ //nodeName 所包含的 XML 元素的标签名称永远是大写的
console.log(target);
}
}
</script>
上一篇: 为什么情人节送礼物