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