Event capture versus event bubble

[WA]

Hi;
Just a question that I've been wondering for a long time now. IE only supports event bubbling while in FF, both event bubble and capture are supported. But when is it actually useful/ necessary to handle events at the Event Capture phase? Can someone provide a practical example of a script that uses event capture (hence not functional in IE I assume)? It seems event bubble is all that's needed for all intents and purposes.

[jkd]

If the event is not cancelable, then you can often call event.stopPropagation() in the capture phase to prevent it from ever reaching the target and hence "canceling" it.

An actual example I've been working with is form submission. For whatever reasons, I could not cancel the "submit" event when triggered by an ENTER keypress (and I didn't want to monitor keypresses). So I just captured the event before it got to the form and stopped it from going any further. Might have been some other reason at work, but this solved it regardless.

[Kor]

and I didn't want to monitor keypresses

why not? Or only for testing something else?

[jkd]

why not? Or only for testing something else?

Well, my desire was to prevent form submission. Keep it simple is my mantra. Form submissions provide a submit event, so only look for that and deal with it as best you can. Why monitor keypress and see if the user is focused in a form field and event.keyCode == 13? It's just extra stuff that you don't need to do in long run.

[Kor]

It's just extra stuff that you don't need to do in long run.

but is a very short styuff to capture the key, something no longer than:

<script type="text/javascript">
function capturekey(e){
var key=(typeof event!='undefined')?window.event.keyCode:e.keyCode;
}
if(navigator.appName!= "Mozilla"){document.onkeypress=capturekey}
else{document.addEventListener("keyup",capturekey,true)}
</script>
...
<input type="text" onkeypress="capturekey(event)">

[jkd]

but is a very short styuff to capture the key, something no longer than:

<script type="text/javascript">
function capturekey(e){
var key=(typeof event!='undefined')?window.event.keyCode:e.keyCode;
}
if(navigator.appName!= "Mozilla"){document.onkeypress=capturekey}
else{document.addEventListener("keyup",capturekey,true)}
</script>
...
<input type="text" onkeypress="capturekey(event)">

No, form.addEventListener("keypress", function(evt) {}, false);. Much shorter. But it's still code functioning in a place I don't want it to. And this is going in the middle of a huge web application, where it is *crucial* to keep things minimal. And there's trickier ways of disabling a submit than just event.stopPropagation(). :)

[Kor]

aha... that makes sense... I understood.

[liorean]

But when is it actually useful/ necessary to handle events at the Event Capture phase? /.../ It seems event bubble is all that's needed for all intents and purposes.Well, it all goes back to when you want to be able to intercept events. If you can only intercept them after thay have triggered the originating element event listener, then that means you must use the originating element event listener to intercept. And since the DOM allows multiple event listeners on the same level, and there is no way to cancel same-level event listeners from triggering by adding new ones, it means there's no way to override an event except by removing it and placing another in it's place. Capturing phase allows you to intercept before it has reached the originating element, thereby allowing control events to be inserted earlier in the event cascade.