<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件委托</title>

</head>

<body>

    <div style="width: 500px;height: 300px;border: 2px solid tomato;border-radius: 5px;margin: 100px auto;padding: 20px;">

        <ul id="oul" style="margin: 0;padding: 0;width: calc(100% - 20px);height: calc(100% - 20px);border: 2px solid gray;border-radius: 5px;padding: 10px;">

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_1</li>

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_2</li>

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_3</li>

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_4</li>

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_5</li>

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_6</li>

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_7</li>

          <li style="width: 100%;height: 30px;background: #999;list-style: none;border-radius: 5px;color: #fff;text-align: center;line-height: 30px;margin-bottom: 5px;">item_8</li>

        </ul>

      </div>

      <script type="text/javascript">

            var oul = document.getElementById('oul');    //不使用事件委托方式

            var this_li = oul.getElementsByTagName('li');

            for (var i = 0; i<this_li.length; i++) {

                this_li[i].onclick = function (ev) {

                    console.log(this.innerHTML);

                }

            }

   ------------- 使用委托方法 -------------------

            var oul = document.getElementById('oul');     //使用事件委托方式

            oul.onclick = function (ev) {

                console.log(ev)

                var ev = ev    || window.event;

                console.log(ev.target)

                var target = ev.target || evsrcElement;　　// 获取节点

                console.log(target)

                if(target.nodeName.toLowerCase() == 'li'){   //nodeName的意思获得DOM元素的节点名称 //toLowerCase()的方法用以是，把获取到的节点名称转换为小写 也可以直接用localName

                    console.log(target.innerHTML)

                }

            }

        </script>

</body>

</html>

在vue中实现事件委托

　　========　

一、概念理解：
1、事件：HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。比如点击事件、鼠标移入/移出事件等。事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
2、DOM 事件流：冒泡事件流、捕获事件流。
3、DOM 事件模型：捕获、目标、冒泡。

那什么是事件委托呢？

事件委托：即是，一个事件本来是要绑定到某个元素上，然而却绑定到了该元素的父（或祖先）元素上，利用事件冒泡原理，触发执行效果。

二、事件委托的优点：

那为什么要使用事件委托？事件委托有什么好处，以及使用时要注意什么？

事件委托大概有两个优点：
1、提高网页性能。
2、通过事件委托添加的事件，对后期生成的元素依然有效。

上面提到的第二点如何理解呢？

举个例子：现在页面上有个 ul，ul 里有三个 li，通过循环给每个 li 添加点击事件，发现三个 li 到可以正常触发点击事件了，然后通过 js 代码在 ul 里插入（append）两个 li，
再试着点击所有 li，发现前面三个 li 正常触发点击事件，后面新添加的两个 li 无法正常触发点击事件。

参考链接（https://blog.csdn.net/zjsfdx/article/details/78235131）

　　========

在父元素上绑定点击事件

<div class="panel" @click="rowClick1($event)">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <a href="#"></a>

</div>

使用e.target可以获得点击时获取的所有属性与值,我们可以通过e.target.localName获取点击的标签名,来进行对比判断,相同则触发绑定事件

<script>

  rowClick1(e){

     console.log(e.target);

     if(e.target.localName === 'li'){

        console.log("触发事件1");

     }else if(e.target.localName === 'a'){

        console.log("触发事件2");

     }

  },

</script>

巴特西

js的委托事件----Vue

在vue中实现事件委托

最新文章

热门文章