javascript中的事件问题的总结

Posted 2020-10-06

一.什么是事件？

　　事件就是DOM和浏览器之间的交互行为(只要触发了这个行为，也就相当于触发了事件)，我们可以通过事件监听来绑定事件，例如：box.onclick=function(){}，如果我们点击了这个盒子，就触发了盒子的click事件，同样会把事件绑定给这个方法，让其执行某一些特定的操作。(事件是浏览器默认给的，与生俱来的，绑定事件时不过是给某一特定元素绑定对应的事件名以及方法，让其执行特定的方法)

事件绑定：就是给某一个元素的相关事件行为绑定方法

　　-> DOM 0级事件：

　　　

　　-> DOM 2级事件：

　　　

二.DOM 0级与DOM 2级事件的区别：

　　1.DOM 0级属于给当前元素的某一个私有的属性赋值：box.click=...

　　　　1).我们通过事件的监听处理程序 onclick属性=function(){}这种形式绑定的事件，叫做DOM 0级事件

　　　　2).所有的DOM 0级事件都是在冒泡，执行的事件处理函数

　　　　3).只能给当前元素的某一个事件绑定一个方法，绑定多个的时候，后边绑定的会将前边的覆盖掉

　　　　4).我们所说的事件是文档和浏览器的交互行为，而文档是DOM，DOM包含了html和document

　　　　5).移除事件监听的处理程序就是直接访问DOM对象的事件监听属性，然后讲处理事件的函数设置为null，比如：

　　　　　　

　　2.DOM２级属于通过原型链的查找机制，找到EventTarget.prototype的addEventListen这个方法，执行这个方法，把需要绑定的函数放在当前元素的事件池中。

　　　　1).可以给当前元素的某一事件类型绑定多个不同的方法，触发事件，这些绑定的方法会按照在事件池中的顺序(和绑定的的顺序相同)依次把方法执行(IE

低版本有区别)

　　　　2).DOM 2中有一些单独的事件，这些事件不是元素的私有属性，所以只有DOM2的绑定方式才会给这些事件绑定方法，例如：DOMContentLoaded...

　　　　3).DOM 2级事件处理事件函数的执行时间是在捕获阶段执行还是在冒泡阶段执行

　　　　4).DOM２级事件的事件监听，是通过DOM元素的原型链查找事件对象上的原型上的addEventListener实现的监听事件

　　　　5).移除事件监听，是通过removeEventListener实现的移除事件监听(标准浏览器)

　　　　6).如果第三个参数不传参的话，我们默认是false，也就是在冒泡阶段发生的

　　　　7).事件处理程序中的this是当前触发事件的元素对象

　　注：1.在IE浏览器中是不同的，IE中的DOM 2级事件，是通过attachEvent()实现的事件监听和detachEvent()事件移除监听，只支持两个参数，将所有事件都定义在冒泡阶段执行，IE浏览器以及IE8以前，即使是DOM 2级事件，也只是支持事件的处理函数，在冒泡阶段执行。

　　　　2.IE中的事件处理程序的this是window

三.事件流：

　　事件的触发执行分为三个步骤：事件捕获阶段->捕获事件源->事件冒泡阶段
　　事件的默认传播机制:
　　　　->捕获阶段:从外向内依次查找元素
　　　　->目标阶段:当前事件源本身的操作
　　　　->冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段)

　　利用事件传播机制可以实现事件委托。

四.事件的相关兼容处理：

　　ele.addEventListener(type,fn,[bool]);  DOM 2级 绑定事件

　　ele.removeEventListener(type,fn,[bool]);   DOM 2级 移除事件

　　ele.attachEvent(‘on‘+type,fn);   DOM 2级 IE中绑定事件

　　ele.detachEvent(‘on‘+type,fn); DOM 2级 IE中移除事件

　　

　　e=e||window.event;  获取事件对象

　　e.target=e.target||e.srcElement;  获取事件源

　　e.stopPropagation?e.stopPropagation():e.cancelBubble=true;  阻止事件传播

　　e.preventDefault?e.preventDefault():e.returnValue=false;  阻止事件冒泡

　　e.pageX=e.pageX||(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX;

　　e.pageY=e.pageY||(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;

　　IE6~8中DOM 2级事件绑定存在的问题：

　　　　1).this指向问题，默认的this指向window；

　　　　2).重复问题，绑定事件的时候，能够重复给同一元素的同一行为，绑定同一事件处理程序；

　　　　3).顺序混乱，给元素绑定事件处理程序后，执行的先后顺序与绑定的先后顺序不一致；