JavaScript - addEventListener（）

上一页
下一页

JavaScript addEventListener（） 方法用于将事件处理程序函数附加到 HTML 元素。这允许您指定一个函数，当指定元素上发生特定事件时将执行该函数。

事件是特定的事件或操作，如用户点击、按键或页面加载。浏览器检测到这些事件并触发关联的 JavaScript 函数（称为事件处理程序）以做出相应的响应。

开发人员使用 'addEventListener（）' 方法在这些事件发生时将特定 HTML 元素与特定函数行为链接起来。事件的示例包括单击、鼠标移动、键盘输入和文档加载。

语法

addEventListener（） 的基本语法如下 -


 element.addEventListener(event, function, options);

这里的元素是一个 HTML 元素，例如 button、input 或 div - 可以使用 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector 等方法进行选择;这些只是几个例子。事件侦听器附加到此特定元素。

参数

addEventListener（） 方法接受以下参数 -

  • event - 体现操作类型的字符串 - 例如，“click”、“mouseover” 或 “keydown” 等;将作为我们执行给定函数的触发器。
  • function − 当指定事件发生时，调用命名的、匿名的或对现有函数的引用;它本质上是促进在预定实例上执行的操作。
  • options （可选） − 它允许指定其他设置，特别是捕获与事件侦听器相关的 OR ONCE 行为。
例子 示例：单击按钮时发出警报

在此示例中，我们将显示一个简单的按钮，单击该按钮后会在屏幕上显示警报。addeventlistener 将负责处理事件 “click”，这意味着它将调用一个函数 handleClick，该函数在单击按钮时向屏幕抛出警报。我们使用 getElementById 来获取要将事件侦听器绑定到的按钮。

在提交表单、登录、注册等时，这是一个常用的事件。


<html>
<head>
	 	<title>Click Event Example</title>
</head>
<body>
	 	<p> Click the button below to perform an event </p>
	 	<button id="myButton">Click Me</button>

	 	<script>
	 	 	 // 获取按钮元素
	 	 	 const button = document.getElementById("myButton");
	 	 	 // 定义事件处理函数
	 	 	 function handleClick() {
	 	 	 	 	alert("Button clicked!");
	 	 	 }
	 	 	 // 将事件侦听器附加到按钮
	 	 	 button.addEventListener("click", handleClick);
	 	</script>

</body>
</html>

示例：鼠标悬停时颜色更改

在此示例中，我们有一个 dig 标签，它最初为浅蓝色。将鼠标悬停在此 div 标签上时，如果将鼠标悬停在此标签上，它将变为红色，然后返回蓝色。

在本例中，有两个事件：mouseover 和 mouseout。mouseover 表示鼠标移动到元素上 mouseout 表示鼠标从元素中移出。

这里有两个函数，一个用于 mouseover，一个用于 mouseout。鼠标悬停时，background color 属性设置为浅珊瑚色（红色阴影），鼠标松开时，background 颜色设置为浅蓝色。

这些类型的鼠标悬停事件在将鼠标悬停在许多网站的导航栏上时很常见。


<html>
<head>
	 	<title>Mouseover Event Example</title>
	 	<style>
	 	 	 #myDiv {
	 	 	 	 	width: 600px;
	 	 	 	 	height: 200px;
	 	 	 	 	background-color: lightblue;
	 	 	 }
	 	</style>
</head>
<body>
	 	<div id="myDiv">Hover over me</div>
	 	<script>
	 	 	 // 获取div元素
	 	 	 const myDiv = document.getElementById("myDiv");

	 	 	 // 定义事件处理函数
	 	 	 function handleMouseover() {
	 	 	 myDiv.style.backgroundColor = "lightcoral";
	 	 	 }	

	 	 	 // 将事件监听器附加到div
	 	 	 myDiv.addEventListener("mouseover", handleMouseover);

	 	 	 // 其他示例：在mouseout上更改颜色
	 	 	 function handleMouseout() {
	 	 	 	 	myDiv.style.backgroundColor = "lightblue";
	 	 	 }

	 	 	 myDiv.addEventListener("mouseout", handleMouseout);
	 	</script>
</body>
</html>

相同的元素可以有多个事件侦听器，就像 第二个 示例一样，它有两个事件侦听器（用于 mouseover 和 mouseout）。可以使用 removeEventListener 函数删除事件侦听器。通过在选项中将参数传递为 once：true，我们可以确保事件侦听器在调用一次后被删除，这在某些情况下（如支付）很重要。

请务必注意，切勿使用 “on” 前缀来指定事件，这只是意味着对于点击事件，我们应该将其指定为 “click” 而不是 “onclick”。

打印本页
上一页
下一页