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

 

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";
});

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值