First look at following codes:
var $ = KISSY.all;
$(‘a’).on(‘click’,function(e){
doSomeThing();//This function seems very famous
e.halt();
});
The above codes seem complete the work we want them. The browser will not redirect us to the link in href, but is there some issue with the codes above?
Before explaining what's wrong with the above codes, we first need to understand some concepts.
Browser default behavior
When we click a link, the browser will redirect us to another link; when pressing ENTER key, the form will submit automatically. These are the default behavior of browser.
JavaScript event propagation mechanism
What's event bubbling?
Assuming we click a button, the events on this element will be triggered, at the same time this event will propagate to all its parent elements and will be triggered. (a->div->body->document->window), event bubbling is from sub element to parent element.
What's event capturing?
In contrast with event bubbling, event capturing has event propagating from parent elements to sub elements.
What's event target?
In simple it's the element where the event begins, i.e a in the above codes.
Event models in different browsers
- Browsers supporting W3C standard : First capturing then bubbling, using addEventListener(event,fn,useCapture) when adding event to an element, the third parameter is useCapture which is a boolean value, if it's true, then using event capturing, otherwise using event bubbling.
- Browsers incompatible with W3C(IE) : IE only supports event bubbling, it doesn't support addEventListener(), neither. But it provides an attachEvent() method to handle events.
Ok, what does e.halt() do above?
When calling halt(), it indeed does two things:
e.preventDefault() -- prevent the browser default behavior
e.stopPropagation() -- cancel event bubbling
After translating preventDefault() and stopPropagation() to raw JS codes.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function preventDefault(e) {if(e && e.preventDefault) {　　e.preventDefault();} else {　　window.event.returnValue = false;}return false;}function stopPropagation(e) {if(e && e.stopPropagation) {　　e.stopPropagation();} else {　　window.event.cancelBubble = true;}return false;} |
What I intend to do in the code at the beginning of the article is to prevent browser default behavior, not canceling event bubbling.
In most situations, the code above has no issues, if we put this code in a big environment, what will happen?
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div><h2><a href="http://etao.com/page1">Page1<div> Teaser text...<div><h2><a href="http://etao.com/page2">Page2<div> Teaser text... |
Now assuming we want users to click the title of an article, the article contents will be dynamically loaded the div. If we want to add an active class to it when users click a div.post element( or any sub element ), We may bind a click listener to div.post.
However, the code above may work or not work sometime. Since we have cancelled the event bubbling when clicking a.
Actually, the information conveyed in this article is that in most situations when you are using e.halt(), you really mean to use e.preventDefault(). This information is really important when you write common components.
Source : http://ued.alimama.com/posts/528
