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

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

页面编写：

通过属性src改变图片

点击图片

js编写：

解析：

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

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

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

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

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

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

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

页面编写：

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

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

通过事件onMouseOver/Out改变图片

移动鼠标到图片

js编写：

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

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

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

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

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

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

页面编写：

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

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

通过事件onmousedown/up改变图片

长按图片

js编写：

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

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

语法：

element.addEventListener(event, function, useCapture);

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

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

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

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

用法：

页面编写：

事件监听addEventListener

click me

js编写：