JS事件

最新推荐文章于 2024-06-10 17:00:16 发布

dky.

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/weixin_53212464/article/details/115107822

版权

JS事件

啥是事件：

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。、
常见的事件
1.鼠标点击
2.页面或图像载入
3.鼠标悬浮于页面的某个热点之上
4.在表单中选取输入框
5.确认表单
6.键盘按键

事件委托

事件委托：
通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
优点

减少内存消耗
动态绑定事件
== 局限性==
当然，事件委托也是有一定局限性的；
比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托；
mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的

事件绑定

绑定的几种方法

① 行内绑定
例：
在这里插入图片描述

② 动态绑定
dom对象.事件 = 事件的处理程序（通常是一个匿名函数）
在这里插入图片描述

③ 事件监听
1.行内：在HTML的标签中通过onclick属性进行绑定，绑定方式：on+事件名，在将所触发的事件赋值给该属性

<button onclick="alert('123');">点击</button>

2.用element.onclick进行事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function(){
				var btn = document.getElementById('btn');
				btn.onclick = function(){
					alert("hello world");
				}
			}
		</script>
	</head>
	<body>
		<button id="btn">点击</button>
	</body>
</html>