JavaScript之事件对象及事件委托

最新推荐文章于 2022-01-22 23:57:32 发布

c-Tomorrow

最新推荐文章于 2022-01-22 23:57:32 发布

阅读量222

点赞数 2

分类专栏： JavaScript JavaScript学习之路文章标签： JavaScript JavaScript事件对象 JavaScript事件源对象 JavaScript事件委托

本文链接：https://blog.csdn.net/c__dreamer/article/details/79386888

版权

JavaScript 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

JavaScript学习之路

50 篇文章 6 订阅

订阅专栏

事件对象

在事件处理函数里面写一个形参，系统会自动进来一个参数。

在IE浏览器系统不会不会把事件对象传到e里面，回传到window.event里面

var div = document.getElementsByTagName('div')[0];
div.onclick = function(e){
var e = e || window.event;
console.log(e);
}

事件源对象

事件源对象就是用户所点击的那个对象。当我们通过冒泡和捕获找到源对象。事件对象里有个方法可以通过冒泡和捕获的元素找到源对象。

e.target 火狐上只有这个。 e.srcElement IE上只有这个。在Chrome上两个都有。所以，当我们找事件源对象的时候必须要做兼容性处理

var div = document.getElementsByTagName('div')[0];
div.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}

事件委托

事件委托是一种事件代码程序，利用事件的冒泡和事件源对象进行处理。优点：1.性能：不需要循环所有的元素一个个的绑定事件；2.灵活：当有新的子元素时不需要再次绑定事件。

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>
<script>
		var ul = document.getElementsByTagName('ul')[0];
		ul.onclick = function(e){
			var event = e || window.event;
			var target = event.target || event.srcElement;
			console.log(target.innerText);
		}

</script>
</html>

上述代码是当我点击每个li的时候显示li中的内容。我们利用冒泡机制和事件源对象，在ul上面绑定事件，通过li的冒泡到ul上面，然后通过事件源对象找到相对应的li，输出其内容。

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，

也希望能帮到大家。一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--