DOM 事件监听程序

最新推荐文章于 2024-08-21 14:09:37 发布

xxx割喉

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量80

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_45326661/article/details/130260717

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

addEventListener()方法用于为元素添加事件监听器，不会覆盖已有事件处理程序，可以添加多个同类型事件，支持事件冒泡和捕获。通过removeEventListener()可以移除事件监听器。示例代码展示了如何添加和移除事件监听器，以及传递参数和处理事件传播的方式。

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

addEventListener() 方法

实例

添加当用户点击按钮时触发的事件监听器：

<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>此示例使用 addEventListener() 方法将 click 事件附加到按钮。</p>

<button id="myBtn">试一试</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

您能够向一个元素添加多个事件处理程序。

您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

向元素添加事件处理程序

实例

当用户点击某个元素时提示 "Hello World!"：

<html>
<body>

<h1>JavaScript addEventListener()</h1>

<p>此示例使用 addEventListener() 方法将 click 事件附加到按钮。</p>

<button id="myBtn">试一试</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

也可以引用外部“命名”函数：

实例

当用户点击某个元素时提示 "Hello World!"：

<html>
<body>
  
<h1>JavaScript addEventListener()</h1>

<p>此例使用 addEventListener() 方法在用户单击按钮时执行函数。</p>

<button id="myBtn">试一试</button>

<script>
  
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  
  alert ("Hello World!");
  
}

</script>
</body>
</html>

向相同元素添加多个事件处理程序

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

实例

<html>
<body>

<h1>JavaScript addEventListener()</h1>

<p>此示例使用 addEventListener() 方法将两个 click 事件添加到同一按钮。</p>

<button id="myBtn">试一试</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
  alert ("Hello World!");
}

function someOtherFunction() {
  alert ("此函数也被执行了！");
}
</script>

</body>
</html>

能够向相同元素添加不同类型的事件：

实例

<html>
<body>

<h1>JavaScript addEventListener()</h1>

<p>此例使用 addEventListener() 方法在同一按钮上添加许多事件。</p>

<button id="myBtn">试一试</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

向 Window 对象添加事件处理程序

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

实例

添加当用户调整窗口大小时触发的事件监听器：

<html>
<body>

<h1>JavaScript addEventListener()</h1>

<p>此例在 window 对象上使用 addEventListener() 方法。</p>

<p>尝试调整此浏览器窗口的大小以触发“resize”事件处理程序。</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

传递参数

当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：

实例

<html>
<body>

<h1>JavaScript addEventListener()</h1>

<p>此例演示如何在使用 addEventListener() 方法时传递参数值。</p>

<p>单击按钮以执行计算。</p>

<button id="myBtn">试一试</button>

<p id="demo"></p>

<script>
var p1 = 5;
var p2 = 7;

document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  var result = a * b;
  document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

事件冒泡还是事件捕获？

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

实例

<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>JavaScript removeEventListener()</h1>

<div id="myDIV">
  <p>这个 div 元素有一个 onmousemove 事件处理程序，每次在这个橙色字段中移动鼠标时都会显示一个随机数。</p>
  <p>单击按钮以删除 div 的事件处理程序。</p>
  <button onclick="removeHandler()" id="myBtn">删除</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

xxx割喉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM 事件监听程序

允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理元素的点击事件，然后是元素的点击事件。在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理元素的点击事件，然后是元素的点击事件。您能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。
复制链接

扫一扫

专栏目录