Menu
All, I know in the Dom level 2 event model, there exists event capture and event bubble. but I just can't figure out how jquery deal with them.
So I did some experiment with the .bind method.
here is my code .please review it .
<script>
$(function() {
$('*').each(function(){
var current = this;
$(this).bind("dblclick",function(event){console.log('Capture for ' + current.tagName + '#'+ current.id +
' target is ' + event.target.id);});
});
});
</script>
<body id="greatgrandpa">
<div id="grandpa">
<div id="pops">
<img id="example" src="designer/templates/thumbnails/2ColsTemplate.PNG" />
</div>
</div>
</body>
the output looks like below
Capture for IMG#example target is example
Capture for DIV#pops target is example
Capture for DIV#grandpa target is example
Capture for BODY#greatgrandpa target is example
Capture for HTML# target is example
When I use the event.stopPropagation(); the event handler will stop bubble the dblclick event.
But I have 2 questions for it .
According the logs writing order ,I guessed the bind method make the event to be triggered in the event bubble(from bottom to the top of dom) not in the event capature(from top of the dom to the bottom).
Another question is is there any possibility make the event to be triggered in the event capture period? thanks.
thanks.
730
Capturing has a higher priority than bubbling, meaning that capturing event handlers are executed before bubbling event handlers, as shown by the phases of event propagation: Capturing phase : the event moves down towards the element. Target phase: the event reaches the target element.
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. With capturing, the event is first captured by the outermost element and propagated to the inner elements.
stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.
stopPropagation()Returns: undefined. Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
jQuery only supports the event bubbling phase, not the event capture phase, not least because for a long time, IE didn't support capture. What your code is showing you is bubbling, not capturing.
Capture goes from the document down to the element on which the event occurred; then bubbling starts on the element and bubbles up to the document again, which is why you see the events in the order you've shown (which is the bubbling phase).
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
