javaScript 事件（上）

最新推荐文章于 2022-11-20 16:43:45 发布

EDB

最新推荐文章于 2022-11-20 16:43:45 发布

阅读量224

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Her_smile/article/details/81044037

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中三种事件绑定的方法：传统方法、addEventListener和attachEvent，包括它们的特点、兼容性和this指向问题。此外还讨论了如何解除事件绑定及注意事项。

摘要由CSDN通过智能技术生成

事件的绑定

首先javaScript绑定事件的方式有三种

ele.onxxx = function (event) {}

上面的xxx是事件类型不需要首字母大写, 这个绑定的方式兼容性很好，但是一个元素只能绑定一个处理程序，也就是一个事件只能同时绑定一个function

obj.addEventListener(type, fn, false)

上面的type是字符串类型的事件类型, 但是它在IE9以下不兼容, 它和第一种方式不同的是它可以为同一个事件绑定多个function，并且按照绑定的顺序执行function, 但是绑定的必须是不同的函数引用,如果绑定多个相同引用的事件，那么相当于只绑定了一个function

obj.attachEvent(‘on’ + type, fn)

这个是IE独有的方法,它基本和第二个方法一样，唯一不同的是如果绑定的多个function是同一个函数引用，那么结果仍然是按照顺序执行多个绑定了的函数

事件的绑定的运行环境this

对于第一二中方法中，被绑定的的函数的内部的this指向的是当前的ele对象, 而对于第三种绑定方法中，它的this指向的是window。如果我们想改变回掉函数的this指向，可以通过下面这种方式来实现（这里以把第三种方法的this变为当前ele为例）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<div id="div">西南科技大学</div>
	</body>
	<script>
		var div = document.getElementsByTagName('div')[0]
		div.attachEvent('onclick', function () {
			test.call(div)
		})
		function test () {
			
		}
	</script>
</html>