JavaScript学习笔记（三）:DOM 事件更改图片、DOM EventListener

系统管理员 2022-03-26 10:14 234阅读 0赞

# #

## JavaScript HTML DOM 事件 ##

在事件发生时执行 JavaScript，比如：

*  当用户点击鼠标时
 *  当网页已加载时
 *  当图像已加载时
 *  当鼠标移动到元素上时
 *  当输入字段被改变时
 *  当提交 HTML 表单时
 *  当用户触发按键时

### **小案例1：通过属性src改变图片** ###

当鼠标点击图片时，更换另一张图片。

**页面编写：**

<html>
     <head></head>
     <body>
      <p>通过属性src改变图片</p> 
      <img src="../img/2018-09-07_162441.png" id="changeimg" onclick="changeImage()" width="40" /> 
      <p>点击图片</p>
     </body>
    </html>

**js编写：**

解析：

document.getElementById("changeimg")：找到指定的图片。

Element.src：指定图片的路径。

Element.src.match("me")：match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。这里用match匹配图片路径中是否含有“me”字符串，包含更换图片路径，否则不更换图片路径。

/* 通过属性src改变图片*/
    function changeImage() {
        Element = document.getElementById("changeimg");
        /* Element.src.match("me"):路径中包含“me”,就加载另一张图片，否则就加载“me”路径的图片。*/
        if (Element.src.match("me")) {
            Element.src = "../img/2018-09-07_162441.png";
        } else {
            Element.src = "../img/me.jpg";
        }
    }

### 小案例2：通过事件onMouseOver/onMouseOut改变图片 ###

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

1.当鼠标移动到图片上时，会触发 onMouseOver事件，更换新图片；

2.当鼠标离开图片时，会触发 onMouseOut事件，换回原来的图片；

3.当完成鼠标点击时，会触发 onclick 事件。

**页面编写：**

οnmοuseοver="changeOver(this)"：当鼠标移动到图片上时，执行 changeOver() 方法更改图片路径；

οnmοuseοut="changeOut(this)"：当鼠标离开图片时，执行 changeOut() 方法更改图片路径。

<html>
     <head></head>
     <body>
      <p>通过事件onMouseOver/Out改变图片</p> 
      <div style="width: 100px; height: 100px;"> 
       <img src="../img/2018-09-07_162441.png" onmouseover="changeOver(this)" onmouseout="changeOut(this)" width="40" /> 
      </div> 
      <p>移动鼠标到图片</p>
     </body>
    </html>

**js编写：**

js中可以通过 Element.style.color = "red";  改变属性的值。这里使用Element.src改变图片路径，Element.width改变图片大小。

changeOver() 方法：光标在图片上，改变图片路径，并把图片的放大到 60px；

changeOut() 方法：光标不在图片上，还原图片路径，并把图片的缩小到 40px；

/*通过事件onMouseOver/Out改变图片*/
    /*鼠标移动到图片时*/
    function changeOver(obj) {
        obj.src = "../img/me.jpg";
        obj.width = 60;
    }
    /*鼠标离开图片时*/
    function changeOut(obj) {
        obj.src = "../img/2018-09-07_162441.png";
        obj.width = 40;
    }

### 小案例3：通过事件onMouseDown/onMouseUp改变图片 ###

1.当鼠标长按图片时，会触发 onmousedown 事件，更换新的图片；

2.当鼠标松开时，会触发 onmouseup 事件，换回原来的图片；

3.当完成鼠标点击时，会触发 onclick 事件。

**页面编写：**

οnmοusedοwn="down(this)"：当鼠标长按图片时，执行 down() 方法更改图片路径；

οnmοuseup="up(this)"：当鼠标松开图片时，执行 up() 方法更改图片路径。

<html>
     <head></head>
     <body>
      <p>通过事件onmousedown/up改变图片</p> 
      <img src="../img/2018-09-07_162441.png" onmousedown="down(this)" onmouseup="up(this)" width="40" /> 
      <p>长按图片</p>
     </body>
    </html>

**js编写：**

down(obj) 方法：调用 down() 方法，改变图片路径，更换新图片；

up(obj) 方法：调用 up() 方法，改变图片路径，还原图片。

/*通过事件onMouseDown/Up改变图片*/
    /*长按图片时*/
    function down(obj) {
        obj.src = "../img/me.jpg";
    }
    /*松开图片时*/
    function up(obj) {
        obj.src = "../img/2018-09-07_162441.png";
    }

### **小案例4：**addEventListener() 方法添加**事件监听** ###

**语法：**

*element*.addEventListener(*event, function, useCapture*);

第一个参数是事件的类型 (如 "click" 或 "mousedown")。

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡（默认false）还是捕获（true）。可选。

注意：不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

**用法：**

*  用于向指定元素添加事件句柄。
 *  添加的事件句柄不会覆盖已存在的事件句柄。
 *  向一个元素添加多个事件句柄。
 *  向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
 *  向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。
 *  更简单的控制事件（冒泡与捕获）。
 *  可读性更强， 在没有控制HTML标记时也可以添加事件监听。
 *  可以使用 removeEventListener() 方法来移除事件的监听。

**页面编写：**

<html>
     <head></head>
     <body>
      <p>事件监听addEventListener</p> 
      <div id="lisdiv" style="width: 200px; height: 100px; background:#DC3F2B; text-align: center;"> 
       <p id="click me">click me</p> 
       <p id="hello"></p> 
      </div>
     </body>
    </html>

**js编写：**

/*事件监听addEventListener*/
    document.getElementById("lisdiv").addEventListener("click",
    function() {
        document.getElementById("hello").innerHTML = "hello";
    });