Js事件委托机制

最新推荐文章于 2024-09-11 11:05:48 发布

宝寶宝

最新推荐文章于 2024-09-11 11:05:48 发布

阅读量429

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_43800477/article/details/122144889

版权

事件委托是一种JavaScript编程技巧，通过在父元素上设置事件监听器，利用事件冒泡机制来处理子元素的事件。这种方法减少了DOM操作，提高了性能，并允许动态添加子元素时依然能响应事件。例如，在给定的代码示例中，点击不同ID的子元素会触发不同的响应，如改变页面标题、跳转链接或显示警告。

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

事件委托：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应。

这样做的优势有：

1.减少DOM操作，提高性能。

2.随时可以添加子元素，添加的子元素会自动有相应的处理事件。

//应用举例    
document.addEventListener("click", function (event) {
var target = event.target;
  switch (target.id) {
    case "doSomething":
      document.title = "事件委托";
      break;
    case "goSomewhere":
      location.href = "http://www.baidu.com";
      break;
    case "sayHi": alert("hi");
      break;
  }
})