study-notes | 个人学习笔记

事件对象

MDN Event 相关文档在执行事件处理函数的时候: 会自动传入一个事件对象, 这个对象中有和这个事件相关的一些信息, 比如事件源(元素节点), 比如事件类型

javascript

var app = document.getElementById("app");
app.addEventListener(
  "click",
  function (e) {
    console.log(e); // 事件对象
    // 事件源: chrome 两个属性都有
    // e.target     : 火狐浏览器只有这个属性
    // e.srcElement : IE浏览器只有这个属性
  },
  false
);

事件委托(时间代理)

什么是事件委托? 通过利用事件冒泡的特性, 将子元素的事件处理函数绑定到其父元素或者祖先元素上
事件委托的使用场景
1. 如果一个列表中, 有很多的子元素都需要绑定事件, 遍历的去绑定是非常消耗性能的, 可以直接将事件处理函数绑定到父元素上然后
2. 有些元素列表需要手动的新增元素, 如果用遍历的方式, 每次新增一个就要给这个新增的添加事件处理函数

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>js</title>
  </head>
  <body>
    <button id="btn">增加一个</button>
    <ul id="app">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>

    <!-- javascript -->
    <script>
      var app = document.getElementById("app");
      var btn = document.getElementById("btn");
      var lis = app.getElementsByTagName("li");

      // 动态添加一个li
      btn.onclick = function () {
        var li = document.createElement("li");
        var num = app.lastElementChild.innerText >> 0;
        li.innerText = num + 1;
        app.append(li);
      };

      // 这种批量绑定事件处理函数的, 不推荐使用 for
      // var item;
      // for (var i = 0, len = lis.length; i < len; i++) {
      //   (function (lis, i) {
      //     item = lis[i];
      //     item.onclick = function () {
      //       console.info(i);
      //     };
      //   })(lis, i);
      // }

      // 事件代理
      app.onclick = function (e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        var index = Array.prototype.indexOf.call(lis, target);
        console.log("index: ", index); // target: 被点击的li标签
        console.log("target: ", target); // index: li标签的索引位置
        console.info(this); // ul#app 元素
      };
    </script>
  </body>
</html>

事件对象 ​

事件委托(时间代理) ​

事件对象

事件委托(时间代理)