• JavaScript 67 JavaScript HTML DOM 67.10 JavaScript HTML DOM 事件监听程序

    JavaScript

    文章目录

    67 JavaScript HTML DOM

    67.10 JavaScript HTML DOM 事件监听程序
    67.10.1 addEventListener() 方法

    【举个栗子】

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

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

    • 1

    在这里插入图片描述

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

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

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

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

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

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

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

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

    67.10.2 语法
    element.addEventListener(event, function, useCapture);

    • 1

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

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

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

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

    67.10.3 向元素添加事件处理程序

    【举个栗子】

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

    element.addEventListener("click", function(){ alert("Hello World!"); });

    • 1
    DOCTYPE html>
<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述

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

    【实例】

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

    element.addEventListener("click", myFunction);

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

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

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

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

    element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

    • 1
    • 2
    DOCTYPE html>
<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

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

    element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

    • 1
    • 2
    • 3

    在这里插入图片描述

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

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

    【举个栗子】

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

    在这里插入图片描述

    67.10.6 传递参数

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

    element.addEventListener("click", function(){ myFunction(p1, p2); });

    • 1
    DOCTYPE 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    67.10.7 事件冒泡还是事件捕获？

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

    事件传播是一种定义当发生事件时元素次序的方法。假如

    元素内有一个

    ，然后用户点击了这个

    元素，应该首先处理哪个元素“click”事件？

    在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理

    元素的点击事件，然后是

    元素的点击事件。

    在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理

    元素的点击事件，然后是

    元素的点击事件。

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

    addEventListener(event, function, useCapture);

    • 1

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

    【举个栗子】

    document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

    • 1
    • 2
    DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
head>
<body>

<h1>JavaScript addEventListener()h1>

<div id="myDiv1">
  <h2>Bubbling:h2>
  <p id="myP1">锟斤拷锟斤拷锟揭ｏ拷p>
div><br>

<div id="myDiv2">
  <h2>Capturing:h2>
  <p id="myP2">锟斤拷锟斤拷锟揭ｏ拷p>
div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("锟斤拷锟斤拷锟剿帮拷色元锟截ｏ拷");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("锟斤拷锟斤拷锟剿筹拷色元锟截ｏ拷");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("锟斤拷锟斤拷锟剿帮拷色元锟截ｏ拷");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("锟斤拷锟斤拷锟剿帮拷色元锟截ｏ拷");
}, true);
script>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    67.10.8 removeEventListener() 方法

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

    element.removeEventListener("mousemove", myFunction);

    • 1
    DOCTYPE html>
<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    67.10.9 浏览器支持

    完全支持这些方法的首个浏览器版本。

    在这里插入图片描述

    **注释：**IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不过，对于这些特殊的浏览器版本，您可以使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除：

    element.attachEvent(event, function);
element.detachEvent(event, function);

    • 1
    • 2

    【跨浏览器的解决方案】

    var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 针对主流浏览器，除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 针对 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
} 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
  • 相关阅读:
    来自上海的联合办公企业堂堂加集团申请纳斯达克IPO上市
    【kafka专栏】kafka集群可用性验证与配置-为主题增加分区数
    程序员怎样才能学好算法，推荐好书送给大家
    【故障公告】攻击式巨量并发请求再次来袭，引发博客站点故障
    记一次Mysql并发死锁
    idea无法通过vpn连接到数据库
    Openlayers 使用天地图Web服务
    zookeeper没有.log日志，只有.out日志
    node.js基本模块
    【CTF】jarvisoj_fm 1
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/127743851