事件监听-EventListener

EventListener

windows的事件监听

addEventListener

语法：element.addEventListener(event, funtion, useCapture);

参数解析:

• event：事件类型，如scroll，resize, click，mousedown

• function：事件触发后的回调函数

• useCapture：事件是冒泡还是捕获，boolen类型，默认为false(冒泡传递事件)

事件传递说明

• 冒泡事件：从内到外触发事件，比如

  ,先触发p的点击事件，再触发div的

• 捕获事件：从外到内触发事件，比如

  ,先触发div的点击事件，再触发p的

  welcome
  
hello
  
world


/** 
     * 事件冒泡、捕获
     * 冒泡从当前触发事件的节点开始找是否绑定事件，绑定则触发，然后继续往上找，有绑定相同事件类型的则触发，直至找到最顶端document
     * 阻止事件冒泡的方法: event.stopPropagation
     * 捕获从当前触发事件的节点的最上级父元素（document）开始往内部找，寻找过程中有事件就触发，没事件继续往内查找，直至找到当前触发事件的节点元素，有事件则触发。
    **/
mounted () {
        let obj1 = document.getElementById('obj1');
        let obj2 = document.getElementById('obj2');
        obj1.addEventListener('click', function(){
            console.log('welcome');
        }, false);
        obj2.addEventListener('click', function(){
            console.log('hello');
        }, false);
    }

removeEventListener

element.removeEventListener(event, funtion, useCapture);

浏览器版本兼容方案

IE8及更早不兼容，可以使用attachEvent、detachEvent