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.backgroundColor="green"
};
addEventListener绑定方式
优点:
- 可以支持事件处理的捕获阶段,也可以支持时间处理的冒泡阶段,两个阶段都是通过addEventListener最后一个参数设置为false(默认值,表示事件冒泡)或者true(表示事件捕获)来切换
- 事件处理 this与onclick一样
- 事件处理函数中,event对象总是作为第一个可用参数
- 你可以为某个元素绑定多个事件而不会覆盖之前绑定的处理程序 (按照顺序执行)
缺点: - IE8以下不支持
dd.addEventListener('click',function(e){
console.log(this.innerHTML);
console.log( e.target.innerHTML );
});
解除事件绑定
对于onclick
dd.onclick = null;
对于addEventListener
function clickShow(){
console.log( 'clickShow' );
}
function removeShow(){
console.log( 'removeShow' );
dd.removeEventListener('click',clickShow,false/true);
}
dd.addEventListener('click',clickShow,flase/true);//当第三个参数flase/true存在的时候 那么移除的时候也应该带有第三个参数,如果没有可以不带
cc.addEventListener('click',removeShow)
阻止事件冒泡e.stopPropagation();
dd.onclick = function(e){
console.log(e.target.innerHTML);
this.style.color = 'red';
//阻止事件冒泡
//防止点击dd的时候隐藏了父级domClick
e.stopPropagation();
}
domClick.addEventListener('click',function(e){
this.style.visibility = 'hidden';
})
屏蔽浏览去的默认行为 e.preventDefult();return false;
参考书籍:《精通javascript》(第二版)第六章