写代码啦
DOM 事件模型
回复数(0) 浏览数(51)
{{topic.upvote_count || 0}} 编辑 回复

今天学习了 DOM 事件模型。这是一个比较重要的概念,我想作为一个新人,如果要真正的消化需要花比较多的一些时间。现在就把脑子里理解到的部分讲一讲。首先我们来看一段代码
<div class=class1>
<div class=class2>
<div class=class3>
文字
</div>
</div>
</div>

现在在三个div上加上三个监听事件,分别为fn1,fn2,fn3。
假设我现在点击了xxx,触发了三个事件,那么fn1、fn2、fn3这三个事件,先调用谁呢?

2002年,W3C发布了标准。表示浏览器都应该支持从外到内以及从内到外的调用。顺序是:
从class1=>class2=>class3,然后,再从class3=>class2=>class1。

其中,class1=>class2=>class3的调用顺序,叫做捕获。class3=>class2=>class1的调用顺序,叫做冒泡。

但是这并不代表,你需要在捕获和调用的时候都执行监听函数,这个是你可以选择的。选择自己在捕获阶段或者在冒泡阶段执行监听函数。

我们引入一个DOM函数叫 addEventListener()来帮我们实现这个功能。

xxx.addEventListener('click',fn,bool)

其中,'click'是事件,fn是调用函数,bool可以取两个值,不传就表示取falsy值。

  • 如果bool取值为true,那么当浏览器在捕获阶段的时候如果发现有监听函数,就执行。

  • 如果bool不取值,或者取为falsy值,那么当浏览器在冒泡阶段的时候如果发现有监听函数,就执行。

这就是一个简单的大致的 DOM 事件模型。

{{topic.upvote_count || 0}}

今天学习了 DOM 事件模型。这是一个比较重要的概念,我想作为一个新人,如果要真正的消化需要花比较多的一些时间。现在就把脑子里理解到的部分讲一讲。首先我们来看一段代码
<div class=class1>
<div class=class2>
<div class=class3>
文字
</div>
</div>
</div>

现在在三个div上加上三个监听事件,分别为fn1,fn2,fn3。
假设我现在点击了xxx,触发了三个事件,那么fn1、fn2、fn3这三个事件,先调用谁呢?

2002年,W3C发布了标准。表示浏览器都应该支持从外到内以及从内到外的调用。顺序是:
从class1=>class2=>class3,然后,再从class3=>class2=>class1。

其中,class1=>class2=>class3的调用顺序,叫做捕获。class3=>class2=>class1的调用顺序,叫做冒泡。

但是这并不代表,你需要在捕获和调用的时候都执行监听函数,这个是你可以选择的。选择自己在捕获阶段或者在冒泡阶段执行监听函数。

我们引入一个DOM函数叫 addEventListener()来帮我们实现这个功能。

xxx.addEventListener('click',fn,bool)

其中,'click'是事件,fn是调用函数,bool可以取两个值,不传就表示取falsy值。

  • 如果bool取值为true,那么当浏览器在捕获阶段的时候如果发现有监听函数,就执行。

  • 如果bool不取值,或者取为falsy值,那么当浏览器在冒泡阶段的时候如果发现有监听函数,就执行。

这就是一个简单的大致的 DOM 事件模型。

51
回复 编辑