简单易理解的 JS事件和事件流

注册事件

注册事件概述

给元素添加事件,称为 注册事件 或者 绑定事件。

注册事件有两种方式: 传统方式 和 方法监听注册方式

传统注册方式：

• 利用on开头的事件 onclick
• <button onclick = "alert(hi-)”>
• btn.onclick = function(){}
• 特点：注册事件的 唯一性
• 同一个元素同个事件只能设置一个处理函数,最
  后注册的处理函数将会覆盖前面注册的处理函数

<button></button>
<script>
	var btn = document.querySelector('button');
    btn[0].onclick = function() {
        alert('He~');
    }
     btn[0].onclick = function() {
        alert('He~he');
    }
    //结果 只会执行一次后面的 因为前面的被覆盖了 传统注册事件的唯一性
</script>

方法监听注册事件

• W3C 推荐的 标准方式
• addEventlistener() 它是一个方法
• IE9 之前不支持该方法，可使用 attachEvent() 代替
• 特点：同一个元素同一个事件可以注册多个监听器
• 按照注册顺序依次执行

语法：

//eventTarget 元素
eventTarget.addEventListener(type, listener[, useCapturel);

eventrarget.addEventListener() 方法将指定的监听器注册到 eventrarget(目标对象)上,当对
象触发指定的事件时,就会执行事件处理函数。

该方法接收三个参数:

• **type:**事件类型字符串,比如 click、 mouseover,注意这里不要带on
• **listener:**事件处理函数,事件发生时,会调用该监听数
• useCapture:: 可选参数,是一个布尔值,默认是 false.学完DOM事件流后,我们再进步学习

IE（为了兼容…）

attachEvent 事件监听方式：

eventTarget.attachEvent（eventNameWithon，callback）

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

该方法接收两个参数：

• eventNameWithOn： 事件类型字符串，比如onclick、onmouseover，这里要带on
• callback： 事件处理函数，当目标触发事件时回调函数被调用

注册事件兼容性解决方案

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

删除事件

1.传统事件删除方式

enentTarget.onclick = null;
如 div.onclick = null;

2.方法监听删除方式

enentTarget.removeEventLister(type,listener[,useCapture]);
// 如果需要删除事件，那么绑定方式将发生变化
div.addEventListener('click',fn); //里面的fn不需要加小括号，因为这样调用是把整个函数赋给调用者

function fn() {
    alert('aaa');
    //在这里面移除事件
    div.removeEventLister('click',fn);
}

3.IE9监听事件删除方式

enentTarget.datachEvent(eventNameWitOn,callback);

// 如果需要删除事件，那么绑定方式将发生变化
div.attachEvent('click',fn); //里面的fn不需要加小括号，因为这样调用是把整个函数赋给调用者
function fn() {
    alert('aaa');
    //在这里面移除事件
    div.datachEvent('click',fn);
}

4.删除事件兼容性封装函数

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

DOM事件流

事件流 描述的是从页面中接收事件的顺序。

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

比如我们给一个 div注册了点击事件:

DOM事件流分为3个阶段:

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

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

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

如：

我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具
体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点(最具体元素)之后漂浮到水面上,这个过
程相当于事件冒泡。

DOM 事件流三个阶段：

• JS 代码中只能执行捕获 或者 冒泡 其中一个阶段

• onclick 和 attachEvent(IE) 只能得到 冒泡阶段

• 捕获阶段，如果 addEventListener 第三个参数是 true 那么则处于捕获阶段

  document → html → body → father → son

【捕获阶段】点击子元素 但是有捕获阶段，所以会先执行父级的事件 document → html → body → father → son

<div class="father">
    <div class="son"></div>
</div>

<script>
    var son = document.querySelector('.son');
    son.addEventListener('click',function(){
        alert('son');
    },true);
    var father = document.querySelector('.father');
    father.addEventListener('click',function(){
        alert('father');
    },true);
</script>

【冒泡阶段】如果 addEventListener 第三个参数是 false 或者省略，那么处于冒泡阶段。点击子元素 但是有冒泡阶段，所以会先执行自身的事件，然后往上查找事件 步骤： son → father → body → html → document

<div class="father">
    <div class="son"></div>
</div>

<script>
    var son = document.querySelector('.son');
    son.addEventListener('click',function(){
        alert('son');
    },false);
    var father = document.querySelector('.father');
    father.addEventListener('click',function(){
        alert('father');
    },false);
</script>

总结

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

注意

• Js代码中只能执行捕获或者冒泡其中的一个阶段。
• onclick和 attachEment只能得到冒泡阶段
• addeventlistener(type, listener, usecapture])第三个参数如果是 true,表示在事件捕
  获阶段调用事件处理程序; 如果是 false（不写默认就是false),表示在事件冒泡阶段调用事件处理
• 实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
• 有些事件是没有冒泡的, 比如 onblur、 on focus、 onmouseerer、 onmouseleave
• 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件

事件对象

事件对象是？

eventTarget.onclick = function (event)()
eventTarget.addEventListener('click', function(event)()
// 这个 event就是事件对象,我们还喜欢的写成e或者evt

官方解释: event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钿的状态。

简单理解: 事件发生后,跟 事件相关的一系列信息数据的集合 都放到这个对象里面,这个对象就是 事件对象event, 它有很多属性和方法。

比如：

1. 谁绑定了这个事件。
2. 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
3. 键盘触发事件的话,会得到腱盘的相关信息,如按了哪个键

使用语法

eventTarget.onclick = function(event) {
    // 这个 event就是事件对象,我们还喜欢的写成e或者evt
}

eventTarget.addEventListener = function('click, function(event){
	// 这个 event就是事件对象,我们还喜欢的写成e或者evt    
}

这个 event是个形参,系统帮我们设定为事件戏象,不需要传递实参过去。

当我们注册事件时, event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。

【例：】

<div class="box">div标签</div>
<script>
    var div = document.querySelector('.box');
    div.addEventListener('click',function(e) {
        console.dir(e);
        //或者写成（window.event）IE写法
        console.log(window.event);
        //或者写成(兼容IE))
        e = e || window.event;
    });
</script>

1. event就是一个事件对象写到我们侦听函数的小括号里面当形参来看。
2. 事件对象只有在有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
3. 事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相关信 息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键
5. 这个事件对象我们可以自己命名比如 event、evt、e
6. 事件对象也有兼容性问题 ie678 通过 window, event 兼容性的写法 e=e || window.event;