欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS的事件监听与委托机制

程序员文章站 2022-06-09 19:12:39
...

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>