pink老师js自学笔记04-高级事件

一、注册事件

• 传统监听事件

传统方式注册事件 同一个元素不能添加多个监听器，只能有一个  
btns[0].onclick = function () {
   
      alert('大家好~');
    }

• 方法监听注册事件

    // eventTarget.addEventListener(type,listener[,useCapture])
    // type:click,mouseover,这里不带on
    // listener：事件处理函数，事件发生时，会调用该监听函数
    // useCapture：可选参数，是一个布尔值，默认是false
    // 2.事件监听注册事件 
    // （1）里面事件类型是字符串，必定加引号并且不带on！！
    // (2)同一个元素同一个事件可以添加多个监听器
    btns[1].addEventListener('click', function () {
   
      alert('111');
    })
    // 3.attachEvent()
    btns[2].attachEvent('onclick', function () {
   
      alert('333');
    })

二、删除（解绑）事件

• 传统解绑方式
• element.事件 = null

 var divs = document.querySelectorAll('div');
    divs[0].onclick = function () {
   
      alert('11');
      // 1.传统解绑方式
      divs[0].onclick = null;
    }

• 方法监听解绑方式

• eventTarget.removeEventListener(type,listener[,useCapture])

  divs[1].addEventListener('click', fn) //里面的fn不需要加小括号
    // 2.方法监听解绑方式
    // eventTarget.removeEventListener(type,listener[,useCapture]) 
    function fn() {
   
      alert(22);
      divs[1].removeEventListener('click', fn);
    }
    

三、DOM事件流

dom事件流 三个阶段

• 1.js代码中只能执行捕获或者冒泡其中的一个阶段
• 2.onclick 和 attachEvent(ie) 只能得到冒泡阶段
• 3.捕获阶段 如果addEventListener第三个参数是true 那么就是捕获阶段

-捕获阶段
   // document -> html -> body -> father ->son 
      // 先弹出father再弹出son
     var son =document.querySelector('.son');
     son.addEventListener('click',function(){
   
       alert('son');
     },true);
    
     var father =document.querySelector('.father');
     father.addEventListener('click',function(){
   
       alert('father');
     },true);

• 4.冒泡阶段 如果addEventListener 第三个参数是false或者省略 那么则处于冒泡阶段

-冒泡阶段
   // document <- html <- body <- father <-son 
      // 先弹出son再弹出father
     var son =document.querySelector('.son');
     son.addEventListener('click',function(){
   
       alert('son');
     },false);
    
     var father =document.querySelector('.father');
     father.addEventListener('click',