事件委托

Posted by 顾小五 on April 2, 2018

事件委托

  1. 在介绍事件委托前,首先要了解DOM的事件流

    DOM事件流分为三个阶段 : 事件捕获,处于目标阶段,事件冒泡

    事件捕获:从根节点开始捕获事件,一级一级向下,逐渐捕获至目标节点

    事件冒泡 : 从目标节点开始捕获事件,一级一级向上,逐渐冒泡只根节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
       
    </head>
    <body>
        <p id="p1">
        	<b id="b1">Hello</b>
            <b id="b2">World</b>
        </p>
    </body>	
    </html>
    

    由上述html页面得,若点击id为b1的b标签,则过程如图 :

  2. 事件委托涉及相关概念

    event对象

    在兼容DOM的浏览器中,在事件处理的过程中,都会传入一个event对象,可以通过target属性获取目标事件

  3. 事件委托

    那么,有这个概念,就可以进行事件委托

    事件委托可以通过父元素设置子元素的监听事件

    在父元素处对子元素设置监听事件,然后通过event对象中的target属性对目标元素进行统一设置监听,可以高度抽象

    由上述例子 :

    	var p = document.getElementById("p1");
    	p1.addEventListener("click",function (even) {
            alert(even.target.innerHTML);
        },false);	//false 设置为在冒泡阶段 ; true 为捕获阶段
    

    我们按以往是通过获取父标签后对子元素的标签遍历添加监听属性,但是通过事件委托,可以在父元素处统一设置监听。