前端面试题_17_事件绑定和事件委托

最新推荐文章于 2024-08-24 21:11:32 发布

PE7ERJ

最新推荐文章于 2024-08-24 21:11:32 发布

阅读量224

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42162265/article/details/110485252

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文探讨了前端开发中的事件绑定方法，包括嵌入DOM、直接绑定和事件监听。重点讲解了事件委托技术，它利用事件冒泡原理，通过一个事件处理程序管理同一类型的所有事件，有效节省内存。示例代码展示了如何实现事件委托。

摘要由CSDN通过智能技术生成

事件绑定的方式

嵌入dom

<button onclick="func()">按钮</button>

直接绑定

    btn.onclick = function(){}

事件监听

    btn.addEventListener('click',function(){})

事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术，使用事件委托可以节省内存。
代码如下所示：

<body>
    <ul id="ul1">
        <li>苹果</li>
        <li>香蕉</li>
        <li>凤梨</li>
        <li>橘子</li>
    </ul>    
</body>
<script>
window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　	alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}
</script>