网站标题如何写,云南小程序开发首选品牌,手机app播放器,互联网推广公司前两节都和addEventListener的click有关#xff0c;于是在想它与onclick有什么区别呢#xff0c;自己调试了一下#xff0c;网上也有相关资料
事件绑定
onclick绑定方式
优点#xff1a; - 简洁 - 处理事件的this关键字指向当前元素 缺点#xff1a; - 不能对事件捕获或…前两节都和addEventListener的click有关于是在想它与onclick有什么区别呢自己调试了一下网上也有相关资料
事件绑定
onclick绑定方式
优点 - 简洁 - 处理事件的this关键字指向当前元素 缺点 - 不能对事件捕获或事件冒泡进行控制只能使用事件冒泡无法切换成事件捕获 - 一次只能对一个元素绑定一个事件处理程序当使用window.onload属性时会覆盖采用相同方法所绑定的事件代码 //this与event查一不大 推荐使用event对象 这样你总是可以拥有全部的可用信息
dd.onclick function(event){
console.log(event.target.innerHTML);//event.target指向的是dd元素以及他的所有信息
console.log(this.innerHTML);//this也是指向dd元素包含他的可用信息
}
//注意有时也会有需要使用this的情况
//当需要鼠标移入和移出的时候 event会触发该事件每一个子元素
dd.onmouseover function(event) {
this.style.backgroundColor red;//不会改变子元素
event.target.style.backgroundColor red;//会改变子元素
};
dd.onmouseout function(event) {
this.style.backgroundColor green
event.target.style.backgroundColorgreen
}; addEventListener绑定方式
优点 - 可以支持事件处理的捕获阶段也可以支持时间处理的冒泡阶段两个阶段都是通过addEventListener最后一个参数设置为false(默认值表示事件冒泡)或者true(表示事件捕获)来切换 - 事件处理 this与onclick一样 - 事件处理函数中event对象总是作为第一个可用参数 - 你可以为某个元素绑定多个事件而不会覆盖之前绑定的处理程序 按照顺序执行 缺点 - IE8以下不支持 dd.addEventListener(click,function(e){
console.log(this.innerHTML);
console.log( e.target.innerHTML );
},false); demo如下 input typebutton idiS_addEventListener valueaddEventListener
input typebutton idiS_onclick valueonclick
script typetext/javascript
(function(){
document.getElementById(iS_addEventListener).addEventListener(click,function(){
alert(我是addEventListener1);
},false);
document.getElementById(iS_addEventListener).addEventListener(click,function(){
alert(我是addEventListener2);
},false);
//onclick是重新赋值变量提升
document.getElementById(iS_onclick).onclick function() {
alert(我是onclick1);
}
document.getElementById(iS_onclick).onclick function() {
alert(我是onclick2);
}
})();
/script 结果是onclick只出现一次alert我是click2【很正常第一次click事件会被第二次所覆盖】但是addEventListener却可以先后运行不会被覆盖【正如它允许给一个事件注册多个监听器。在使用DHTML库或者 Mozilla extensions 这样需要保证能够和其他的库或者差距并存的时候非常有用。】
解除事件绑定
对于onclick直接 dd.onclick null;
对于addEventListener则需要oElement.removeEventListener(sEvent,fnHandler,false);
阻止事件冒泡
e.stopPropagation(); 或 return false; dd.onclick function(e){
console.log(e.target.innerHTML);
this.style.color red;
//阻止事件冒泡
//防止点击dd的时候隐藏了父级domClick
e.stopPropagation(); //或 return false;
} 区别
return 可以同时阻止冒泡且阻止事件的默认行为 [比如a点击链接时跳转到百度,return false,便会阻止跳转]
event.stopPropagation(); 阻止事件的进一步传播.(冒泡阶段和捕获阶段) 更多专业前端知识请上
【猿2048】www.mk2048.com
