【JS】原生JS事件绑定onclick和addEventListener

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》（第二版）第六章