JS之事件_js .on-优快云博客

本文链接：https://blog.youkuaiyun.com/gxgalaxy/article/details/90473456

本文介绍了JavaScript中事件绑定、事件处理程序运行环境及解除事件处理程序的相关知识。事件绑定有.onclick、addEventListener、attachEvent等方法；不同绑定方式下，事件处理程序的this指向不同；解除事件处理程序也有对应的方法，但绑定匿名函数时无法解除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何绑定事件

1、.onclick = function(){}；

兼容性很好，但是一个元素的同一事件上只能绑定一个处理，基本等同于写在HTML行间上

var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
		console.log(this);
	}

2、obj.addEventListener(type,fn,false);

IE9及以下不兼容,可以为一个事件绑定多个处理程序,安装绑定的顺序去执行，不能重复绑定一个函数多次

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
		console.log('a');
	},false);

3、obj.attachEvent('on' + type,fn);
IE独有，一个事件同样可以绑定多个处理程序,可以执行一个函数多次

var div = getElementsByTagName('div')[0];
div.attachEvent('onclick',function(){

	});

事件处理程序的运行环境

1、ele.onxxx = function(event){}

程序this指向的是dom元素本身

var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
		console.log(this);
	}

2、obj.addEventListener(type,fn,false);
程序this指向的是dom元素本身

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
		console.log(this);
	},false);

3、obj.attachEvent('on' + type,fn);
程序this指向window

var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick',function(){
		// console.log(this);  
		//想让this指向div
		// 看下面操作，将事件处理函数写在外面。
		handle.call(div);
	});
	function handle(){
		// 事件处理程序

	}

解除事件处理程序

1、ele.onclick = false /''/null;

var div = getElementsByTagName('div')[0];
div.onclick = function(){
		console.log('a');
		this.onclick = null;  //一次失效
	}

2、ele.removeEventListener(type,fn,false);

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',test,false);
function test(){
		console.log('a');
	}
	div.removeEventListener('click',test,false);

3、ele.detachEvent('on' + type,fn);

注：若绑定匿名函数，则无法解除