Js查漏补缺-09

0x00 事件流

    removeElementListener();可以解除元素的事件监听器绑定

    事件流是页面中接受事件的传递顺序，包括捕获阶段，当前目标阶段，冒泡阶段

     注意，Js只能执行冒泡或者捕获中的一个阶段；

    onclick等注册事件以及attachEvent只能得到冒泡阶段；

    addEventListener（）若第三个参数为false（默认就是false），则也是冒泡阶段调用事件处理程序；而若第三个参数为true，则在捕获阶段调用事件处理程序；

   

  <div class="father">
    <p class="son">123</p>
  </div>
  <script>
    let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    father.addEventListener('click', () => {
        alert('father');
    });
    son.addEventListener('click', () => {
        alert('son');
    });
  </script>

    如上，这个例子点击son元素会先弹出son后弹出father；这是因为在事件的冒泡阶段先访问son后访问father

    若加上true参数，则先弹出father后弹出son

  <div class="father">
    <p class="son">123</p>
  </div>
  <script>
    let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    father.addEventListener('click', () => {
        alert('father');
    },true);
    son.addEventListener('click', () => {
        alert('son');
    },true);
  </script>

    另外注意，onblur，onfocus，onmouseenter，onmouseleave是没有冒泡的

0x01 事件对象

   事件对象保存的当前事件的信息

  

let div = document.querySelector('.name');
div.addEventListener('click',(event) => {
    console.log('第一种方法,兼容性较好')
})
div.addEventListener('click',(e) => {
    console.log('第二种方法,ie9以上才支持')
})

    获取触发事件对象的方法

e.target // 标准写法
e.srcElement // 非标准写法 ie6-8

    另外注意 e.target和this的区别

e.target // 获取的是触发事件的对象，click事件就是返回鼠标点击的元素
this     // 获取的是绑定事件的元素

    返回事件类型：e.type;