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