JS事件委托

最新推荐文章于 2024-12-09 11:13:14 发布

羽行

最新推荐文章于 2024-12-09 11:13:14 发布

阅读量8.5k

点赞数 6

分类专栏：笔记 JS事件 javaScript 文章标签： javascript 前端 js

本文链接：https://blog.csdn.net/YuHang6686/article/details/124081768

版权

笔记同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

JS事件

1 篇文章 0 订阅

订阅专栏

javaScript

1 篇文章 0 订阅

订阅专栏

作用：事件委托主要用来减少内存消耗，不用处理多次循环绑定

使用方法：

var target = document.getElementsById("获取元素")
//元素调用
target.addEventListener(type, listener, options);
type：必选参数,需要绑定的事件名称，"不要带on"
listener:必选参数，回调函数，你需要绑定的方法；
options：可选参数，默认为false；表示"事件冒泡"，设置为true后为"事件捕获"

1、捕获阶段：事件从window对象自上而下向目标节点传播的阶段；

2、目标阶段：真正的目标节点正在处理事件的阶段；

3、冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。

优点

1.减少内存消耗，提高性能

2.动态绑定事件

3.冒泡、委托对事件连环触发带来的影响

4.替代原生JS中循环绑定事件的操作

普通事件绑定，依赖循环，循环次数增加，内存损耗增加

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
<script>
    var li  = document.getElementsByTagName("li")
    console.log(li);
    for(let i=0;i<li.length;i++){
        li[i].onclick = function(){
        this.style.background = "skyblue"
        }
    }

事件委托：父节点接受委托给子节点分配点击事件

--------------------------给子元素添加事件----------------------
<body>
    <ul id="list">
        <li>item 1</li>
        <li class="item">item 2</li>
        <li>item 3</li>
        ......
        <li>item n</li>
      </ul>
</body>
<script>
 // 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
//   if (e.target.matches("ul>li")) {
  if (e.target.className=="item") {
   //if (e.target.matches("ul>li")) {
//     if (e.target.nodeName=="LI") {

//不同写法,判断可以是节点对象，也可以是类名和id之类
    console.log('the content is: ', target.innerHTML);
  }
});

终止事件冒泡

方法一：在相应的函数中加上event.stopPropagation()

这是阻止事件的冒泡方法，不让事件向documen上蔓延。

  <script>
        function fn1(){
            alert(111
            event.stopPropagation()      
        }
            </script>

方法二：在相应的函数中加上event. preventDefault()

如果调用这个方法，默认事件行为将不再触发。什么是默认事件呢？例如表单一点击提交按钮(submit)跳转页面、a标签默认页面跳转或是锚点定位等。
//方法三：
<a id="test" href="http://www.cnblogs.com">链接</a>
<script>
test.onclick = function(e){
    e = e || window.event;
    e.preventDefault();
}
</script>