Introduction to the difference between

First of all, I saw many articles online that are generally divided into two (incorrect) views:
1. cancelBubble is used for blocking bubble events of ie, () is used for other browsers such as firefox and chrome.
Not to mention whether the above is right or wrong
Let’s take a look at an example: (test environment: chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8)

Copy the codeThe code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"> 
<html xmlns="http:///1999/xhtml" > 
<head> 
<title>Unt title page</title>
</head> 
<body onclick="alert('body');"> 
<input  type="button" value="button" onclick="clickBtn(event)" /> 
<script language="javascript" type="text/javascript"> 
function clickBtn(event) 
{ 
event=event?event:; 
=true; 
alert(); 
} 
</script> 
</body> 
</html> 

After testing:
a,chrom5.0.275.7, opera10.53, ie6,7,8 In these browsers, cancelBubble is valid and can prevent events from bubbled, making the body's onclick unable to trigger. Only trigger button click
alert(); output result true
b. In the moz3.6.4 version, the body's onclick cannot be blocked, but the output result of alert(); is still true. I think this should be just adding a property to the event and assigning the value to true;
When changing the js code to this:

Copy the codeThe code is as follows:

 
<script language="javascript" type="text/javascript"> 
function clickBtn(event) 
{ 
event=event?event:; 
(); 
alert("123"); 
} 
</script> 

It can be effectively blocked. Of course (); in chrome and opera is also effective.
Conclusion 1: The above explanation is already supported in the new version of Chrome and Opera browser, which is just a little short of moz. In fact, I personally think it is better than (), not only in terms of English meaning. So I hope that moz will release a new version and support it. This will be compatible
2. There are also questions about the order of events that I often read:
Incompletely accurate conclusions (considered)
ie: Source event element ->> Parent element event ->>body-->>document
moz: other browsers such as the opposite of the above
Let’s take a look at an example:

Copy the codeThe code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"> 
<html xmlns="http:///1999/xhtml" > 
<head> 
<title>Unt title page</title>
</head> 
<body onclick="alert('body');"> 
<div onclick="clickBtn(event)" style="width:100px;height:100px; background:#666;"> 
<input  type="button" value="button" onclick="alert('btn');" /> 
</div> 
<script language="javascript" type="text/javascript"> 
function clickBtn(event) 
{ 
event=event?event:; 
(); 
alert("123"); 
} 
</script> 
</body> 
</html> 

If according to the above point, I click the button event now from body--->div---->button,,,,,, then the alertbody first and then trigger the div to pop up 123. Since bubbles are prevented, the button's click will not be triggered.
But after our tests. moz is still triggered from the inside to the outside. Correct execution of alert("btn") --->>alert("123")----Stop bubbles and do not trigger the click event of the body
At this point, do you suspect that the above is incorrect? However, the above statement is correct for events added with addListenter and attachEvent(). like:

Copy the codeThe code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"> 
<html xmlns="http:///1999/xhtml" > 
<head> 
<title>Unt title page</title>
</head> 
<body> 
<ul id='ul'> 
<li id='li1'>List Item1</li> 
<li id='li2'>List Item2</li> 
</ul> 
<script language="javascript" type="text/javascript"> 
function init(){ 
if(!!){ 
('li1').attachEvent('onclick', function(event){ 
alert('li1'); 
}) 
('li2').attachEvent('onclick', function(event){ 
alert('li2'); 
}) 
('ul').attachEvent('onclick', function(event){ 
alert('ul'); 
// = true; 
alert(); 
}); 
}else{ 
('li1').addEventListener('click', function(event){ 
alert('li1'); 
}, true) 
('li2').addEventListener('click', function(event){ 
alert('li2'); 
}, true) 
('ul').addEventListener('click', function(event){ 
event=event?event:; 
(); 
alert('ul'); 
}, true); 
} 
} 
init(); 
</script> 
</body> 
</html> 

This method is consistent. The execution result is to trigger the click event of ul and then because it prevents bubbles, so when you click Li, its own click event will not be triggered. (By the way, using this dynamically adding events seems to work in moz, but there is a difference in chrome and moz)