js事件绑定并获取元素

时间:2019-03-19
本文章向大家介绍js事件绑定并获取元素,主要包括js事件绑定并获取元素使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

事件绑定获取元素方式

DOM事件绑定的几种方式

  1. html中直接绑定:利用html事件属性。html中绑定事件叫做内联绑定事件,不利于分离。不能解绑

  2. js中直接绑定:利用DOM操作。js中直接绑定称为赋值绑定函数,缺点是只能绑定一次。解绑ele.onclick=null

  3. addEventListener:注意去掉on,通过removeEventListener()解绑

需要注意的就是箭头函数会改变this的指向,会根据外层作用域来决定this。

		var elem = document.getElementById('text');
 		elem.addEventListener('click',(e)=>{
 			console.log(e.target.childNodes[0]);
			//这里this 指向window
 		});
		//如果用this不要用箭头函数,否则函数里面的this指向的是window
		elem.addEventListener('click',function(e){
			//下面两种方式都可以用
			console.log(e.target.childNodes[0]);
			console.log(this.childNodes[0]); 
		
		})
		
		elem.onclick = (e)=>{
			console.log(e.target.childNodes[0]);
		}
		
		elem.onclick = function(){
			console.log(this.childNodes[0]);
		}