js事件机制

2019-11-06 07:06:41

字体：大中小

来源：转载

供稿：网友

1、事件和事件流

js和html之间的交互，通过事件来实现。事件的起源，主要是为了分担服务器运算负载的一种手段。DOM2级规范的标准DOM事件是符合逻辑的标准化的。IE9、Firfox、Opera、Safira和Chrome已经全部实现了DOM2级事件模块的核心模块。事件，就是文档或者浏览器窗口中发生的一些特定交互瞬间。那么事件是如何被触发的，也就是说它什么时候执行，这就是事件机制问题。netscape和微软曾事件的触发有各自的争议，netscape认为，通过捕获方式，触发事件；微软主张通过冒泡方式触发事件。后来w3c采用折中处理方式，制定了同一的标准--先捕获再冒泡。所以事件被触发分为3个阶段:事件捕获，目标阶段(正在执行当前对象的事件处理程序)，事件冒泡。DOM2级事件流图:

这里写图片描述

2、事件对象

(1)event.currentTarget 事件的监听者 (2)event.target 事件的真正触发者 (3)event.srcElement IE浏览器的事件真正触发者，event.target===event.srcElement (true) (4)event.type 事件类型 (5)event.eventPhase 事件阶段

3、事件执行过程(事件机制)

预备知识： element.addEventListener(eventName,fn(event),boolean) 将指定的监听器注册到 element上,当该对象触发指定的事件eventName时,指定的回调函数就会被执行; boolean 为false,事件在冒泡阶段被执行；boolean为true,事件在捕获阶段被执行。举例解释:

<div id="A">A <div id="B">B</div> </div> a.addEventListener('click', function (e) { console.log(e.target); //事件的真正触发者 console.log(e.srcElement) //事件的真正触发者，IE的 console.log(e.currentTarget); //事件的监听者 console.log(e.type) //事件类型 console.log(e.eventPhase) //事件阶段 }, false);

(1)如果点击A,结果为：

> <div id='A'>...</div> > <div id='A'>...</div> > <div id='A'>...</div> click 2 //即事件的真正触发者是A,因为A上有click事件，并且有鼠标有点击的操作; //事件的监听者是A,因为是给A注册的监听事件 //事件类型是 click,因为鼠标进行的是点击操作 //事件被触发的阶段，是在事件目标阶段2，因为事件的监听者和真正触发者都是A

(2)如果点击B,结果为

<div id='B'>B</div>><div id='A'>...</div>click3 //即事件的真正触发者是B,因为B上有click事件，并且有鼠标点击的操作; //事件的监听者是A,因为是给A注册的监听事件 //事件类型是 click,因为鼠标进行的是点击操作 //事件被触发的阶段，是在事件捕获阶段3，因为事件从A开始监听，监听到B上的click事件被触发了，但是由于addEventListener第3参数false的设置，只在冒泡阶段被执行

(3)事件机制总结：

假设有两个存在嵌套关系的divA>divB(divB被嵌套在divA中)，divA注册了click点击事件(事件的监听者是A)，事件设置在冒泡阶段(一般目标阶段也包括了)执行。那么，如果鼠标点击了A，先在捕获阶段，事件流到了A,A监听到了click事件(因为给A设置了监听事件click),虽然A有click事件，但是在捕获阶段A上的事件处理函数也不会执行，然后依次向内传到B,B没有click事件，不执行事件处理函数，然后向外传；在冒泡阶段，事件流向A,A有click事件，相应的事件处理函数被执行。 规律： 1)事件执行存在3个阶段:事件捕获、事件目标、事件冒泡，一次事件只能出现2个阶段：捕获和目标，或者冒泡和目标，捕获和冒泡不可能同时出现。 2)不管在捕获阶段，还是在冒泡阶段，只要事件的监听者和真正触发者是同一个元素，那么事件阶段(event.eventPhase)处于目标阶段2，如果事件的监听者和真正触发者不是同一个，那么设置在什么阶段执行事件处理函数，event.eventPhase就是什么阶段。 3)注册事件的函数，称为事件处理程序或者事件侦听器。 4)元素的监听器，只能监听到嵌套在它里面的元素的鼠标操作，监听不到它外层的鼠标操作。 5)addEvent的事件处理函数中的this指向window;addEventListener,onclick,jQuery的click,on的事件处理函数中的this指向事件监听者（event.currentTarget） 6)onclick,jQuery中的on,click方法中的事件处理函数都是在事件阶段或者事件冒泡阶段执行。 7)W3c标准也提倡在事件冒泡阶段执行事件处理函数

4、阻止事件冒泡

有时候，我们会遇到这样的情况，元素A嵌套了元素B，元素B嵌套了元素C,同时给ABC注册了click事件，但是要求当点击C时，只允许C上的处理函数执行，不允许A和B上的处理函数执行，这时，就需要阻止事件冒泡。方法有：//IE 阻止事件冒泡window.event.cancelBubble = true // event不是事件处理函数中的event// 火狐阻止事件冒泡e.stopPRopagation() //e为事件处理函数中的e//谷歌以上两种方法均可以

上一篇：C中指针的输出格式和long long 的输出格式 %02x与%2x 之间的区别

下一篇：区间dp