js事件高级(事件监听,事件对象,DOM事件流,事件委托)

事件高级

1.注册事件(2种方式)

1.1传统注册方式

利用on开头的事件 onclick;

<button onclick="我是最帅的" ></button>

;

btn.onclick = function(){ };

特点:注册事件的唯一性;

同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数;

1.2监听注册方式

addEventListener()

是一个方法;

IE9之前的不支持此方法,可以使用attchEvent()代替;

特点:同意元素同一个事件可以注册多个监听器;

按注册顺序依次执行;

2.事件监听

2.1

addEventListener()

事件监听 (IE9之后支持);

eventTarget.addEventLIstener(type, listener, [, useCapture])

eventTarget.addEventListener()

方法将指定的监听器注册到eventTarget(目标对象)上,当该对象出发制定事件处理函数;

三个参数:

1. type : 事件类型字符串,比如click, mouseover , mouseenter… 这里不要带on;
2. listener : 事件处理函数,事件发生时,会调用该监听函数;
3. useCapture : 可选参数, 是一个布尔值,默认是false, 默认时或者填写false时 会发生事件冒泡,如果填写true时会发生事件捕获,不同情况不同对待;

2.2

attacheEvent()

事件监听 (IE678支持)

eventTarget.attachEvent(eventNameWithOn,callback)

;

eventTarget.attachEvent() 方法将指定的监听器注册到evevtTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行;

两个参数:

eventNameWithOn: 事件类型字符串,比如onclick, onmouseover, 这里带on;

callback: 事件处理函数,当目标触发事件回调函数被调用;

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    // 1. 传统方式注册事件
    btns[0].onclick = function() {
        console.log('传统注册事件');
    }
    btns[0].onclick = function() {
         console.log('传统注册事件2222222');//会把上边那个覆盖掉
        }
   // 2. 事件侦听注册事件 addEventListener 
   // (1) 里面的事件类型是字符串 必定加引号 而且不带on
   // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click', function() {
       console.log('方法监听注册事件');
    })
    btns[1].addEventListener('click', function() {
            console.log('方法监听注册事件2222222');//两个事件都会执行,不会覆盖
    })
    // 3. attachEvent ie9以前的版本支持
    btns[2].attachEvent('onclick', function() {
        console.log('ie9 attachEvent');
    })
</script>
           

2.3事件监听兼容性封装函数

function addEventListener(element,eventName,fun){
   //判断当前浏览器是否支持addEventListener方法
    if(element.addEventListener){
        //第三个参数默认false
        element.addEventListener(eventName,fun);
    }else if (element.attachEvent){
        element.attachEvent('on' + eventName, fun);
    }else {
        element['on' + eventName] = fun ;
    }
}
           

3.删除事件(解绑事件)

3.1传统注册方式解绑

eventTarget.onclick = null ;

3.2事件监听注册方式解绑

IE9之后

eventTarget.addEventLIstener(type, listener, [, useCapture])

IE678

eventTarget.attachEvent(eventNameWithOn,callback)

;

<div>传统方式注册事件</div>
    <div>方法监听注册事件</div>
    <div>ie attachEvent</div>
<script>
    var divs = document.getElementsByTagName('div');
    divs[0].onclick = function(){
        alert('传统方式注册事件');
        // 1.传统事件删除事件  再次点击就没有效果
        divs[0].onclick = null;
    }
    // 2.removeEventlistener  删除事件
    divs[1].addEventListener('click',fun); //里边的fn不需要加小括号
    function fun(){
        alert('方法监听注册事件');
        divs[1].removeEventListener('click',fun);
    }
    // 3.datachEvent
    divs[2].attachEvent('onclick',fn);
    function fn(){
        alert('ie attachEvent');
        divs[2].datachEvent('onclick',fn);
    }
           

3.3 兼容函数

function addEventListener(element,eventName,fun){
   //判断当前浏览器是否支持removeEventListener方法
    if(element.removeEventListener){
        //第三个参数默认false
        element.removeEventListener(eventName,fun);
    }else if (element,datachEvent){
        element.datachEvent('on' + eventName, fun);
    }else {
        element['on' + eventName] = null ;
    }
}
           

4.DOM事件流

DOM流指的是从页面中接收时间的顺序;

事件发生时会在元素节点之间按照特定的顺序传播,这个过程就是DOM事件流;

html标签都是相互嵌套的,document是最外面的大盒子,当你点击了div时,同时也点击了div的父元素,甚至整个页面,如果父盒子和子盒子和document都有点击事件,先执行哪一个就是个矛盾;

事件冒泡: 事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程;

事件捕获: 事件由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收过程;

DOM事件流会经历三个阶段

1.捕获阶段;

2.当前目标阶段;

3.冒泡阶段;

注意:

1.js代码只能执行捕获或者冒泡其中一个阶段;

2.onclick 和 attachEvent 只能得到冒泡阶段;

3.addEventListener(type,listener, [, useCapture])方法的第三个参数如果是true,表示在事件捕获阶段调用事件处理程序,如果是false或者不写参数,默认是false, 表示在事件冒泡阶段调用事件处理程序;

4.有些事件没有冒泡 如 onblur , onfocus, onmouseenter , onmouseleave ;

5.事件对象

事件对象就是事件发生后,跟事件相关的一系列信息数据的集合都放到对象里面,这个对象就是事件对象;

使用方式:

事件触发时就会产生事件对象,并且系统会以实参的形式传给事件处理函数,需要有一个形参来接收事件对象;

//1
eventTarget.onclick = function(event){
    //event就是事件对象或者写为e;
}
//2
eventTarget.addEventListener('click',function(event){
    //event就是事件对象或者写为e;
})
//3
eventTarget.addEventListener('click' fun)
function fun(event){
    //event就是事件对象或者写为e;
}
//4兼容性处理,在事件函数里边加一句
 e = e || window.event;
           

5.1事件对象的属性和方法

//1.返回触发事件的对象
e.target
//2.返回触发事件的对象
e.srcElement
//3.返回事件类型 如click mouseover mouseout 不带on
e.type
//4.阻止事件冒泡  IE678使用
e.cancleBubble
//5.阻止默认事件(默认行为)  如:不让链接跳转
e.returnValue
//6.这是一个方法 阻止默认事件  如: 不让链接跳转
e.preventDefault()
//7.阻止冒泡
e.stopPropagation()
           

阻止事件冒泡兼容处理

if(e && e.stopPropagation){
    e.stopPropagation();
}else{
    window.event.cancleBubble = true;
}
           

事件委托

**原理:**给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素

作用: 只操作了一次DOM,提高程序性能;

<ul>
        <li>点我,你就是最帅的</li>
        <li>点我,你就是最帅的</li>
        <li>点我,你就是最帅的</li>
        <li>点我,你就是最帅的</li>
        <li>点我,你就是最帅的</li>
        <li>点我,你就是最帅的</li>
        <li>点我,你就是最帅的</li>
        <li>点我,你就是最帅的</li>
    </ul>
	<script>
    	//事件委托的和心原理:给父节点添加侦听器 利用事件冒泡影响每一个子节点
    	var ul = document.getElementsByTagName('ul')[0];
    	ul.addEventListener('click',function(e){
        	// e.target 这个可以得到我们的点击对象
        	e.target.style.backgroundColor = 'pink';
    	})
	</script>