×

学习JS中的冒泡事件

作者:shiji2018.05.22来源:Web前端之家浏览:16499评论:0
关键词:冒泡

我们绑定事件的处理函数的时候,可以传递一个形参,代表我们的事件对象,一般是e或者event,系统会自动帮我们捕获事件源对象并且把事件源对象传入。

取消冒泡的方法

1.w3c标准方法:event.stopPropagation()

box1.onclick = function(e){
console.log("box1");
}
box2.onclick = function(e){
console.log("box2")
}
box3.onclick = function(e){
console.log("box3");
var e = e || window.event;
e.stopPropagation();
}
这样点击box3的时候,就只会打印box3了。但是点击其它的还会触发冒泡事件的。

IE9以及以下的版本不支持这个方法。

2.event.cancelBubble = true

这个属性是IE的,不过一些高版本的浏览器也有这个属性,只要让这个属性的值等于true,同样也可以取消事件冒泡。

封装一个兼容性的取消事件冒泡的方法:
function stopBubble(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
当我们在浏览器中点击右键,会弹出一个菜单,这就是一个默认事件contextmenu。还有a标签,即使我们不写跳转的页面,也会自动刷新页面,这也是一个默认事件。

阻止默认事件

1.return false

我们只要在处理函数最后写上 return false就可以阻止默认事件了。
document.oncontextmenu = function () {
console.log('menu');
return false;
}

2.e.preventDefault()

documet.addEventListener('contextmenu', function (e) {
console.log('menu');
e.preventDefault();
},false);

这是w3c标准的阻止默认事件的方法。

3.e.returnValue = false

这个是IE的方法,事件源对象上的属性returnValue代表是否有默认事件,直接返回false就可以阻止默认事件了。现在高版本的浏览器也有这个属性。

document.attachEvent('oncontextmenu', function (e) {
e.returnValue = false;
});

现在我们也可以封装一个兼容性的阻止默认事件的方法了:

function cancelHandler(event) {
if(event.preventDefault) {
event.preventDefault();
}else{
event.returnValue = false;
}
}

阻止a标签不跳转:

<span style="color:#ff0000;font-weight:700;">
</span>
<span style="color:#000000;">
var a = document.links[0];
a.addEventListener('click', funciton (e) {
cancelHandler(e);
},false);
</span>

同时我们还可以用a标签的第四个用处,协议限定符来阻止默认事件。
<a href="javascript: void(0); ">www.baidu.com</a>

事件对象

在IE中,系统不会把事件对象传到方法中,因此我们的参数e或者event在IE中是不好用的,IE会把事件对象传递到window.event上,所以当我们使用事件对象的时候,就要写兼容性的写法:

var event = e || window.event;

事件委托

我们现在有一个ul,下面有十万个li,当我们给父级的ul添加第一个点击事件之后,由于事件冒泡的存在,不论我们点击哪一个li都会调用父级的点击事件处理函数,这个时候触发父级ul的点击函数的那个li就被称之为事件源对象。

event.target火狐的获取事件源对象

event.srcElement IE的获取事件源对象

chrome两种都有

因此我们在获取事件源对象的时候也需要写兼容性写法, 配合刚才的事件对象的兼容性写法就是这个样子的:

我们现在有一个ul,下面有十万个li,当我们给父级的ul添加第一个点击事件之后,由于事件冒泡的存在,不论我们点击哪一个li都会调用父级的点击事件处理函数,这个时候触发父级ul的点击函数的那个li就被称之为事件源对象。

event.target火狐的获取事件源对象

event.srcElement IE的获取事件源对象

chrome两种都有

因此我们在获取事件源对象的时候也需要写兼容性写法, 配合刚才的事件对象的兼容性写法就是这个样子的:

oUl.addEventListener('click', function (e) {
var event = e || window.event;
var tar = event.target || event.srcElement;
console.log(tar.innerHTML);
}, false);

事件委托的优点

1.性能 不需要循环所有的子元素一个个绑定事件

2.灵活 当有新的子元素被加入的时候不需要重新绑定事件

有一个关于绑定事件和闭包结合的题,是一个比较经典的题目:

var $Li = document.getElementsByTagName('li');
for (var i = 0, len = $Li.length; i < len; i++) {
(function (n) {
$Li[n].addEventListener('click', function () {
console.log(n);
},false);
} (i));

您的支持是我们创作的动力!
温馨提示:本文作者系,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js1294812041208.html

网友评论文明上网理性发言已有0人参与

发表评论: