隨着接觸jQery與JS越多，發現自己有時會對兩者的用法有混淆。這不，今天做一個事件處理的時候就發現問題了。
在之前的腦海里，只有preventDefault(阻止默認事件)、stopPropagation(阻止冒泡)這兩個事件的概念，但是具體到針對某一個要做兼容處理的時候還是不確定js和jQuery用到他們時的區別。於是，就開始查資料，結果發現網上也是層次不齊，不是很能解決我的疑惑，於是自己動手寫代碼去實踐。
首先簡單介紹下默認事件與冒泡事件概念：
-
- 默認事件：指瀏覽器的默認動作。比如a鏈接指定了跳轉地址，設置阻止默認事件后，它就不能進行跳轉了。
- 冒泡事件：指事件從原始元素開始一直冒泡到DOM樹的最上層。比如子元素和父元素都注冊了點擊事件，如果沒有阻止冒泡事件，那么當點擊子元素時，父元素上的注冊事件也會發生。
首先，用jQuery做了如下實驗：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>默認事件與冒泡事件</title>
</head>
<body>
<div id="box">
<a href="http://www.baidu.com" id="testLink">百度</a>
</div>
<script src="mod/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function stopDefault( e ) {
e.preventDefault()
}
function stopPropagation( e ) {
e.stopPropagation()
}
$('#testLink').on('click',function(e) {
console.log('我的鏈接地址是：' + this.href + ', 但是我不會跳轉。');
stopDefault(e);
stopPropagation(e);
})
$('#box').on('click',function(e) {
console.log('我是外面的盒子');
})
</script>
</body>
</html>
以上沒有做任何兼容處理，在ie7及以上瀏覽器中均運行成功（即都成功的阻止了冒泡事件與默認事件）。且注意的一點是事件”e“也不需要做e = event || window.event處理。
然后我又在基本語法不變的情況下用JS做實驗，代碼如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>默認事件與冒泡事件</title>
</head>
<body>
<div id="box">
<a href="http://www.baidu.com" id="testLink">百度</a>
</div>
<script type="text/javascript">
var e,
oBox = document.getElementById('box'),
oLink = document.getElementById('testLink');
function stopDefault( e ) {
e.preventDefault()
}
function stopPropagation( e ) {
e.stopPropagation()
}
oLink.onclick = function(e) {
console.log('我的鏈接地址是：' + this.href + ', 但是我不會跳轉。');
stopDefault(e);
stopPropagation(e);
}
oBox.onclick = function(e) {
console.log('我是外面的盒子');
}
</script>
</body>
</html>
發現總是報錯：
，經過改良，加上兼容處理，代碼如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>默認事件與冒泡事件</title>
</head>
<body>
<div id="box">
<a href="http://www.baidu.com" id="testLink">百度</a>
</div>
<script type="text/javascript">
var oBox = document.getElementById('box'),
oLink = document.getElementById('testLink');
function stopDefault( e ) {
if (e && e.preventDefault) {
e.preventDefault();
}else{
e.returnValue = false;
}
}
function stopPropagation( e ) {
if (e.stopPropagation) {
e.stopPropagation()
} else{
e.cancelBubble = true;
};
}
oLink.onclick = function(event) {
var e = event || window.event
console.log('我的鏈接地址是：' + this.href + ', 但是我不會跳轉。');
stopDefault(e);
stopPropagation(e);
}
oBox.onclick = function() {
console.log('我是外面的盒子');
}
</script>
</body>
</html>
結果ie7及以上也都成功了。特別注意要處理event兼容，不然也會報錯。
以上實驗，終於理清了我腦海里的不明確，希望大家以此為鑒，碰到不清楚的問題自己實踐一遍。加強記憶的同時也能收獲一些意外的知識。加油！