随着接触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兼容，不然也会报错。
以上实验，终于理清了我脑海里的不明确，希望大家以此为鉴，碰到不清楚的问题自己实践一遍。加强记忆的同时也能收获一些意外的知识。加油！