js事件委托(代理)的原理

概念: js事件委托是通过给需要委托元素的父元素添加一个监听事件,利用了事件冒泡的原理。当子元素事件触发时会冒泡到父元素上。

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
 
 
var ul = document.getElementById('ul');
    ul.onclick = function(e) {
    var e = e || window.event; // 处理IE兼容
    var target = e.target ? e.target : e.srcElement; //处理IE兼容
    if (target.nodeName.toLowerCase() ===  'li') {
      alert(target.innerHTML);
    }
}

事件委托和普通事件邦定区别:

1、普通事件绑定是给每个元素都绑定一个事件,动态添加的元素无法被绑定上事件。事件委托是给它们共同的父元素绑定一个监听事件,利用冒泡事件对子元素的事件捕获

2、普通事件绑定事件越多,性能越差。事件委托能减少内存的使用,优化性能。

猜你喜欢

转载自blog.csdn.net/Gunahao/article/details/80369655