JS复习addEventListenter

摘要:分析DOM事件响应的三个阶段

事件绑定常用以下三种方法,如‘点击’事件:

  • 方法一:
    直接在对应的HTML元素标签上绑定函数

html


  • 方法二:在JavaScript代码里面指定元素的“onclick”方法

js var btn = document.getElementById('submit'); btn.onclick = onClickFn;

  • 方法三:使用事件监听绑定方法

js var btn = document.getElementById('submit'); btn.addEventListener('click', onClickFn, false);

  三种方法都可以在button被点击的时候调用onClickFn函数,但是有所区别。

第一种方法不推荐,因为违反了HTML与JavaScript分离的准则;

第二种方法只能给一个事件绑定一个响应函数,重复绑定会覆盖之前的绑定;

第三种方法比较推荐,可以绑定多个不同的函数。

  当鼠标点击所看到的的按钮时,其实发生了一系列的事件传递,可以想象一下,button实际上是被body“包裹”起来的,body是被html“包裹”起来的,html是被document“包裹”起来的,document是被window“包裹”起来的。所以,在你的鼠标点下去的时候,最先获得这个点击的是最外面的window,然后经过一系列传递才会传到最后的目标button,当传到button的时候,这个事件又会像水底的泡泡一样慢慢往外层穿出,直到window结束。

  综上,一个事件的传递过程包含三个阶段,分别称为:

捕获阶段,目标阶段,冒泡阶段   目标指的就是包裹得最深的那个元素。

假设HTML有如下元素:

1
2
3
4
5
<div id='d'>
<p id='p'>
<span id='s'>Click Me!</span>
</p>
</div>

JavaScript代码如下:

1
2
3
4
5
6
7
8
9
10
var div = document.getElementById('d');
var p = document.getElementById('p');
var span = document.getElementById('s');
function onClickFn (event) {
var tagName = event.currentTarget.tagName;
var phase = event.eventPhase;
console.log(tagName, phase);
}
div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);

此时,点击“Click Me!”,即可在控制台看到如下结果:

1
2
P 3
DIV 3

其中“3”和“冒泡阶段”对应。

可以看出,pdiv都是在冒泡阶段相应了事件,由于冒泡的特性,裹在里层的p率先做出响应。

如果把上面代码里面中addEventListener的第三个参数设置为true,那么运行的结果如下:

1
2
DIV 1
P 1

由此,addEventListener的第三个参数设置为truefalse的区别已经非常清晰了:

true表示该元素在事件的“捕获阶段”(由外往内传递时)响应事件;

false表示该元素在事件的“冒泡阶段”(由内向外传递时)响应时间。

至此,你可能会有疑问,还有一个“目标阶段”呢?

您不妨给span元素绑定事件,自己测试一下。

在冒泡阶段,如果不希望事件继续往上传播,例如,冒泡的p的时候就停止传播,那么,可以在p的事件回调函数里面这么写:

1
2
3
4
function onClickFn (event) {
// code here
event.stopPropagation();
}

这样,冒泡到p的时候,就不会再向上传播了,即,div不会收到冒泡上来的click事件。

如果还想把其它与p绑定的响应函数的事件也“屏蔽”掉,需要把stopPropagation换为stopImmediatePropagation

【END】

文章目录
  1. 1. 摘要:分析DOM事件响应的三个阶段
|