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

最新推荐文章于 2023-06-13 11:30:49 发布

Mr.Piglet

最新推荐文章于 2023-06-13 11:30:49 发布

阅读量1.8k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript HTML DOM

本文链接：https://blog.csdn.net/qq_38931949/article/details/86514258

版权

JavaScript 专栏收录该内容

11 篇文章 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() 方法来移除事件的监听。

页面编写：

<!--事件监听addEventListener-->
<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";
});