JavaScript学习笔记（DOM 事件、事件监听器）

淡淡的烟草味﹌ 2023-02-12 13:25 7阅读 0赞

## JavaScript学习笔记（DOM 事件、事件监听器）  @\[TOC\](JavaScript学习笔记（DOM 事件、事件监听器）  HTML事件属性  使用HTML DOM分配事件  onload和onunload事件  onchange事件  onmouseove 和onmouseout事件  onmousedown,onmouseup 以及onclick事件  事件监听器  addEventListener()方法  外部函数 的方式  向相同元素添加多个事件处理程序  能够向相同元素添加不同类型的事件：  向Window对象添加事件处理程序  传递参数  事件 冒泡还是事件捕获？  removeEventListener()方法  跨浏览器解决方案： ##

HTML DOM 允许 JavaScript 对 HTML 事件作出反应：

--------------------

对事件作出反应  
JavaScript能够在事件发生时，比如当用户点击某个HTML元素时。  
为了在用户点击元素时执行代码，请向HTML事件属性添加JavaScript代码：

onclick = JavaScript

HTML事件的例子:

*  当用户点击鼠标时
 *  当网页加载后
 *  当图像加载后
 *  当鼠标移至元素上时-
 *  当输入字段被改变时
 *  当 HTML 表单被提交时
 *  当用户敲击按键时  
    例如，当用户点击h1时，会改变其内容

使用事件处理程序调用函数：

<body>
        
        <h1 onclick="changeText(this)">请点击我亲爱的！</h1>
    
        <script>
            function changeText(id) {   
                id.innerHTML = "你是不是傻啊！";        }
        </script>
    </body>

--------------------

## HTML事件属性 ##

如需向 HTML 元素分配事件，您能够使用事件属性。  
向button元素分配onclick事件：

<p>请点击按钮来显示日期。</p>
    
        <button onclick="displayDate()">今天的时间是？</button>
    
        <script>
            function displayDate() {   
                document.getElementById("demo").innerHTML = Date();
            }
        </script>
    
        <p id="demo"></p>

![在这里插入图片描述][20200526122342382.png]  
在上例中，名为 displayDate 的函数会在按钮被点击时执行。

--------------------

## 使用HTML DOM分配事件 ##

HTML DOM允许使用JavaScript向HTML元素分配事件：

实例为button元素指定onclick事件：

<p>请点击“试一试”按钮，以执行 displayDate() 函数。</p>
    
        <button id="myBtn" >试一试</button>
    
        <p id="demo"></p> 
        <script>
            document.getElementById("myBtn").onclick = displayDate;
    
            function displayDate() {   
                document.getElementById("demo").innerHTML = Date();
            }
        </script>

![在这里插入图片描述][20200526123321569.png]  
在上例中，名为 displayDate 的函数被分配到 id=“myBtn” 的 HTML 元素。

当点击按钮时将执行函数。

--------------------

## onload和onunload事件 ##

当用户进入后及离开页面时，会触发onload和onunload事件。  
onload事件可用于检测访问都的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。  
onload和onunload事件可用于处理cookie。  
实例：

<body onload="checkCookies()">
    
    
        <p id="demo"></p>
    
        <script>
            function checkCookies() {   
                var text = "";
                if(navigator.cookieEnabled == true){ 
                    text = "Cookie 已启用";
                }else{ 
                    text = "Cookie 未启用";
                }
                document.getElementById("demo").innerHTML = text;
            }
        </script>
    </body>

![在这里插入图片描述][2020052612393487.png]

--------------------

## onchange事件 ##

onchange 事件经常与输入字段验证结合使用。  
下面是一个如何使用onchange的例子。当用户改变输入字段内容时，会调用upperCase()函数。

实现

![在这里插入图片描述][20200526125912330.png]

--------------------

## onmouseove 和onmouseout事件 ##

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

<div onmousemove="mOver(this)" onmouseout="mOut(this)"
        style="background-color: red;width: 
        120px;height: 20px;padding: 40px;">请把鼠标移上来</div>
    
        <script>
            function mOver(obj) {   
                obj.innerHTML = "谢谢小宝贝！"
            }
    
            function mOut(obj) { 
                obj.innerHTML = "请把鼠标移上来"
            }
        </script>

![在这里插入图片描述][20200526131244330.png]

--------------------

## onmousedown,onmouseup 以及onclick事件 ##

onmousedown,onmouseup以及onclick事件构成了完整的鼠标单击事件。  
首先当鼠标按钮被点击时，onmousedown事件被触发  
然后当鼠标 按钮被释放时，onmouseup事件被触发  
最后当鼠标 点击完成 后，onclick事件被触发。

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
        style="background-color: #D94A38;width: 90px;height: 20px;padding: 40px;">
        点击鼠标</div>
    
        <script>
            function mDown(obj) {   
                obj.style.backgroundColor = "#1ec5e5";
                obj.innerHTML = "松开鼠标";
            }
            function mUp(obj) { 
                obj.style.backgroundColor="#D94A38";
                obj.innerHTML = "谢谢你！";
            }
        </script>

--------------------

## 事件监听器 ##

### addEventListener()方法 ###

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

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

<h2>JavaScript addEventListener</h2>
    
        <p>此示例使用 addEventListener() 方法将click事件附加到按钮。</p>
    
        <button id="myBtn">试一试</button>
    
        <p id="demo"></p>
    
        <script>
            //addEventListener() 方法为指定元素指定事件处理程序。
            document.getElementById("myBtn").addEventListener("click",
            displayDate);
    
            function displayDate() { 
                document.getElementById("demo").innerHTML = Date();
            }
        </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70]  
解释：  
addEventListener()方法为指定元素指定事件处理程序。  
addEventListener()方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。  
能够向一个元素添加多个事件处理程序。  
能够向一个元素添加多个相同类型的事件处理程序，例如两个"click"事件。  
能够向任何DOM对象添加事件处理程序而非仅仅HTML元素，例如window对象。  
addEventListener()方法使我们更容易控制事件如何对冒泡作出反应。  
当使用addEventListener()方法时，JavaScript与HTML标记是分隔的，已达到更佳的可读性；即使在不控制HTML标记时也允许添加事件监听器。  
能够通过使用removeEventListener()方法轻松地删除事件监听器。  
语法 ：

element.addEventListener(event,function,userCapture;

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

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

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

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

--------------------

向元素添加事件处理程序

当用户点击某个元素时提示"hello world!";

<h2>JavaScript addEventListener</h2>
    
        <p>此示例使用 addEventListener() 方法将click事件附加到按钮。</p>
    
        <button id="myBtn">试一试</button>
    
        <p id="demo"></p>
    
        <script>
            document.getElementById("myBtn").addEventListener("click",
            function () {   
                alert("Hello World!");
            });
        </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 1]

### 外部函数 的方式 ###

<h2>JavaScript addEventListener</h2>
    
        <p>此示例使用 addEventListener() 方法将click事件附加到按钮。</p>
    
        <button id="myBtn">试一试</button>
    
        <p id="demo"></p>
    
        <script>
          
            document.getElementById("myBtn").addEventListener("click",
            myFunction);
    
            function myFunction() {   
                alert("Hello World");
            }
        </script>

--------------------

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

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

<h1>JavaScript addEventListener()</h1>
    
        <p>此示例使用 addEventListener() 方法将两个 click事件附加到按钮。</p>
    
        <button id="myBtn">试一试</button>
    
    
        <script>
            var x = document.getElementById("myBtn");
            x.addEventListener("click",myFuction);
            x.addEventListener("click",someOtherFuction);
    
            //addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：
            //这里也就执行了两个弹出窗口事件
            function myFuction(){ 
                alert("myFuction函数执行了！");
            }
    
            function someOtherFuction() {   
                alert("someOtherFuction函数执行了！")
            }
    
        </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 2]

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

用 addEventListener() 方法在同一按钮上添加许多事件。

<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>

演示效果：  
![在这里插入图片描述][20200526204631908.gif_pic_center]

--------------------

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

addEventListener() 允许将事件监听器添加到任何HTML DOM对象上，比如HTML元素、HTML对象、window对象或者其他支持事件的对象、比如xmlHttpRequest对象。  
添加当用户调整窗口大小时触发的事件监听器：

<h1>JavaScript addEventListener()</h1>
    
        <p>此例在 window 对象上使用 addEventListener() 方法</p>
    
        <p>尝试调整此浏览器窗口的大小以触发"resize"事件处理程序。</p>
        <p id="demo"></p>
    
        <script>
            //改变浏览器窗口的大小就会随机生成一个数并写到id为
            window.addEventListener("resize",function () {   
                document.getElementById("demo").innerHTML = Math.random();
            });
    
        </script>

![在这里插入图片描述][20200526211101804.png]

--------------------

## 传递参数 ##

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

<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 3]

--------------------

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

在HTML DOM中有两种事件传播的方法：冒泡和捕获。  
事件传播是一种定义当发生事件时元素次序的方法。假如div元素内有一个p，然后用户点击了这个p元素，应该首先处理哪个元素"click"事件？  
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理p元素的点击事件，然后是div元素的点击事件。  
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理div元素的点击事件，然后是p元素的点击事件。  
在addEventListener()方法中，你能够通过使用“userCapture”参数来规定传播类型：

addEventListener(event,functioni,userCapture);

--------------------

### removeEventListener()方法 ###

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

<head>
        <meta charset="utf-8">
    
        <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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 4][]

--------------------

### 跨浏览器解决方案： ###

<body>
    
        <h1>JavaScript addEventListener()</h1>
        
        <p>Internet Explorer 8 及更早版本不支持 addEventListener() 方法。</p>
        
        <p>此例演示了适用于所有浏览器的解决方案。</p>
        
        <button id="myBtn">试一试</button>
        
        <script>
        var x = document.getElementById("myBtn");
        if (x.addEventListener) { 
          x.addEventListener("click", myFunction);
        } else if (x.attachEvent) { 
          x.attachEvent("onclick", myFunction);
        }
        
        function myFunction() { 
          alert("Hello World!");
        }
        </script>
        
        </body>

[20200526122342382.png]: https://img-blog.csdnimg.cn/20200526122342382.png
[20200526123321569.png]: https://img-blog.csdnimg.cn/20200526123321569.png
[2020052612393487.png]: https://img-blog.csdnimg.cn/2020052612393487.png
[20200526125912330.png]: https://img-blog.csdnimg.cn/20200526125912330.png
[20200526131244330.png]: https://img-blog.csdnimg.cn/20200526131244330.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526195409785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200526200705696.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200526203141634.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ==,size_16,color_FFFFFF,t_70
[20200526204631908.gif_pic_center]: https://img-blog.csdnimg.cn/20200526204631908.gif#pic_center
[20200526211101804.png]: https://img-blog.csdnimg.cn/20200526211101804.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200526212415566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200527000737428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ==,size_16,color_FFFFFF,t_70