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

女爷i 2022-05-27 04:42 629阅读 0赞

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