事件委托

事件委托

  1. 不用给子元素循环绑定事件,提高性能
  2. 新添加的子元素,仍能保留原有事件

Event 对象兼容处理

IE :window.event.srcElement
标准:event.target
兼容写法

function(e){
    var e = e || window.event;
    var target = ev.target || e.srcElement;
    alert(target.innerHTML);// 对目标元素处理,检测
}

下面贴一段代码演示

<ul id="ul">
    <li>11</li>
    <li>22</li>
    <li>33</li>
</ul>
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');

oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    // 用nodeName节点名判断是子元素还是父元素
    if(target.nodeName.toLowerCase() == 'li'){
        target.style.background = 'red';
    }
};
oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;

    if(target.nodeName.toLowerCase() == 'li'){
        target.style.background = '';
    }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容