前端学习笔记

day 24
事件监听器

1.addEventListener:用于监听特定元素上的事件（如点击、输入、鼠标移动等），并在这些事件发生时执行相应的事件处理函数

格式(不带on事件名，事件处理函数,bool值)

oDiv.addEventListener("click", function () {
        console.log("ok");

2.事件监听器和普通添加事件的区别

1）事件监听器可以给一个DOM对象同时添加多个相同事件名，当事件触发时，对应的事件处理函数都会执行，普通的添加方式后面的会覆盖前面的

 outer.addEventListener("click", function () {
        console.log(1);
      });
      outer.addEventListener("click", function () {
        console.log(2);
      }); 

2）事件监听器支持捕获

  inner.addEventListener(
        "click",
        function () {
          console.log("inner");
        },
        true
      );
      outer.addEventListener(
        "click",
        function () {
          console.log("outer");
        },
        true
      );

默认行为

1.一个事件没有给对应的事件处理函数，当这个事件触发时，默认呈现的效果，称为事件默认行为

2.阻止默认行为：e.preventDefault() /return false;

 subNav.onclick = function (e) {
        // e.preventDefault(); };

3.在事件监听器中return false无效

事件委托

1.事件委托：利用事件冒泡的原理，把本应该添加到某个DOM对象的事件，添加到它的父级元素上（外层）

2.目的：让新增的DOM对象具有相同的事件 好处：减少了事件添加的次数，提高了执行效率

oUl.onclick = function (e) {
 if (e.target.tagName == "LI") {
          console.log("ok");
        }
      };
      oBtn.onclick = function () {
        for (var i = 0; i < 5; i++) {
          var oLi = document.createElement("li");
          oUl.appendChild(oLi);
        }
      };