2021-06-10 事件委托和event.target

相关概念

  event.target 属性:返回哪个 DOM 元素触发了事件

  事件冒泡:事件从最深的节点开始，然后逐步向上传播事件

  事件委托:把原本需要绑定在子元素的响应事件委托给父元素

  事件委托的好处:减少对DOM的操作

示例

  1.event.target:

    var ul = document.querySelector("ul");
    var lis = document.querySelectorAll("li");
    ul.onclick = function(eve) {
        var target = eve.target || window.target;
        console.log(target); //<li>i</li>
        console.log(target.nodeName); //LI
        if (target.nodeName == 'LI') {
            console.log(target.innerHTML); //li的文本内容
        }

  2.非事件委托:

var lis = document.querySelectorAll("li");
var p = document.querySelector("p");
//通过循环多次绑定子节点达到效果
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function(eve) {
        var eve = eve || window.event;//event考虑兼容
        var target = eve.target || window.srcElement;//target考虑兼容
        p.innerHTML = target.style.backgroundColor;;
        p.style.color =target.style.backgroundColor;;
    }
}

  3.用事件委托达到相同效果:

    var ul = document.querySelector("ul");
    var lis = document.querySelectorAll("li");
    var p = document.querySelector("p");
	//不需要通过for循环,减少了dom节点的绑定操作
    ul.onclick = function(eve) {
        var target = eve.target;
        if (target.nodeName == "LI") {
            p.innerHTML = target.style.backgroundColor;
            p.style.color = target.style.backgroundColor;
        }
    }

总结

1.事件绑定到了父节点上,故而省略绑定事件。
2.新增的子节点若也有相关事件，删除部分子节点不用去销毁对应节点上绑定的事件
3.父节点通过event.target来找对应的子节点。
4.事件处理程序中的this值始终等于currentTarget的值，指向绑定到的那个元素