事件处理程序和听众事件冒泡和事件捕获 [英] Event Handlers and Listeners & Event Bubbling and Event Capturing
问题描述
我在JavaScript中与事件侦听器，事件处理程序，事件冒泡和事件捕获混淆。
我在互联网上搜索查看不同的网站，但是我仍然有理解一些差异甚至基本条件的问题。
As 本文建议，创建事件处理程序并侦听事件。
- 这是否意味着，附加到DOM内的元素的JavaScript函数不是事件处理程序，它们是事件侦听器？ >
另外，这里我发现事件冒泡和事件捕获之间的差异。此外，我已经读了很久以前，在 dojo 中，所有的事件都被< ; body> 标签。
-
这是否意味着DOM中的其余元素没有附加JavaScript？
-
更确切地说，如果一个事件将由父母通过事件冒泡来处理，那么没有必要向孩子添加监听器？
这些术语背后的确切定义是什么？
事件处理程序/事件侦听器
事件侦听器和事件处理程序 - 对于所有实际目的，它们是一样的。但是，它可能会有所不同：
我可以定义一个处理程序...
function myHandler（e）{alert（'事件处理'）; }
...并使用'addEventListener'附加到多个元素：
elementA.addEventListener（'click'，myHandler）;
elementB.addEventListener（'click'，myHandler，true）;
或者，我可以将处理程序定义为addEventListener中的闭包：
elementC.addEventListener（'click'，function（e）{alert（'Event Handled'）;}）;
事件捕获/事件冒泡
您可以将事件捕获视为事件冒泡的相反 - 或事件生命周期的两半。 DOM元素可以嵌套（当然）。从最外层的父母到最内层的孩子首先将 CAPTURES 的事件，然后从最内层的孩子到最外面的父母 b
$您可能已经注意到，在上面的示例中，附加到elementB的侦听器有一个附加参数 - true - 不传递给elementA。这告诉侦听者在 CAPTURE 阶段响应事件，而默认情况下它将响应于 BUBBLE 阶段。假设我们有3个嵌套的div元素：
< div id =one>
1
< div id =two>
2
< div id =three>
3
< / div>
< / div>
< / div>
...我们在每个附加一个点击处理程序：
document.getElementById（'one'）。addEventListener（'click'，function（）{alert（'ONE'）;}）;
document.getElementById（'two'）。addEventListener（'click'，function（）{alert（'TWO'）;}，true）;
document.getElementById（'three'）。addEventListener（'click'，function（）{alert（'THREE'）}）;
如果您点击1，您将看到一个带有ONE文本的警报框。
如果您点击2，您会看到一个提醒框两个，其次是警报框ONE（因为两个 CAPTURE PHASE 和one在泡泡相之前备份的路上被触发。）
如果您点击3，您会看到一个提醒框TWO（ CAPTURED ），后跟一个提醒框三（> ），然后是一个警报
清除泥浆，对吧？
I am confused with "Event Listener", "Event Handler", "Event Bubbling" and "Event Capturing" in JavaScript.
I have search in internet and have looked into different website but, I still have problem understanding some differences and even the basic condition.
As this article suggests, the event handler is created and listens for an event.
- Does it mean that, the JavaScript functions attached to the elements inside the DOM are not event handler and they are event listener?
Also, here I found the differences between "Event bubbling" and "Event capturing". Also, I have read some time ago that in dojo all the events are captured by the <body> tag.
Does it mean that there is no JavaScript attached to the rest of the elements inside the DOM?
More precisely, is this true that if an event is going to be handled by the parent through "Event Bubbling" there is no need to add listener to the children?
What is the precise definition behind these terms?
Event Handlers / Event Listeners
There's no difference between an Event Listener and an Event Handler - for all practical purposes, they're the same thing. But, it may help to think about them differently:
I can define a single "handler" ...
function myHandler( e ){ alert('Event handled'); }
... and attach it to multiple elements using 'addEventListener':
elementA.addEventListener( 'click', myHandler );
elementB.addEventListener( 'click', myHandler, true );
Or, I can define my "handler" as a closure within 'addEventListener':
elementC.addEventListener( 'click', function( e ){ alert('Event Handled'); } );
Event Capturing / Event Bubbling
You can think of Event Capturing as the opposite of Event Bubbling - or as the two halves of the event lifecycle. DOM elements can be nested (of course). An event first CAPTURES from the outermost parent to the innermost child, and then BUBBLES from the innermost child to the outermost parent.
You may have noticed that in my example above, the listener attached to elementB has an additional parameter - true - that is not passed to elementA. This tells the listener to respond to the event on the CAPTURE phase, whereas it would respond on the BUBBLE phase by default. Try this at jsfiddle.net:
Say we have 3 nested div elements:
<div id="one">
1
<div id="two">
2
<div id="three">
3
</div>
</div>
</div>
... and we attach a 'click' handler to each:
document.getElementById('one').addEventListener( 'click', function(){ alert('ONE'); } );
document.getElementById('two').addEventListener( 'click', function(){ alert('TWO'); }, true );
document.getElementById('three').addEventListener( 'click', function(){ alert('THREE') } );
If you click '1', you'll see an alert box with the text 'ONE'.
If you click '2', you'll see an alert box 'TWO', followed by an alert box 'ONE' (because 'two' is fired first during the CAPTURE PHASE, and 'one' is fired on the way back up during the BUBBLE PHASE)
If you click '3', you'll see an alert box 'TWO' (CAPTURED), followed by an alert box 'THREE' (BUBBLED), followed by an alert box 'ONE' (BUBBLED).
Clear as mud, right?
这篇关于事件处理程序和听众事件冒泡和事件捕获的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
