事件对象
包含事件相关的信息,如鼠标、时间、触发的DOM对象等
js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下:
document.getElementsByTagName("div")[0].onclick = function(e){
e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上)
console.log(e);//这里e就是事件对象
}
事件的属性和方法
type:获取事件类型(click、mouseover等等)
target:获取发生的所在元素(在低版本IE下用srcElement属性)
stopPropagation() 阻止事件冒泡(IE用cancelBubble属性为false阻止冒泡)
preventDefault() 阻止事件默认行为(IE用returnValue属性为false阻止默认行为)
事件委托
利用target属性,获取时间发生的所在对象,避免全体子元素加事件,对比如下:
var tbs=document.getElementsByTagName("td");
for(var i=0;i<tbs.length;i++){//循环给每个子元素添加事件
tbs[i].onclick=function(){
this.style.background="red";
}
}
document.getElementsByTagName("table")[0].onclick=function(e){
e.target.style.background="red";//只绑定父元素事件,用target获取子元素
}
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有