文章目录
前言
监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件
一、效果展示
鼠标聚焦、鼠标移开、鼠标点击等等都可以作为监听句柄
二、句柄合集
<!--
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载
onclick 失去焦点
onfocuse 获取焦点
-->
三、添加监听的两种的方式：
1.将事件与函数绑定在一起
例如将点击监听句柄与f1函数绑定起来
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>functionf1(){
element=document.getElementById("myimage")if(element.src.match("bulbon")){
element.src="../pic_bulboff.gif"}else{
element.src="../pic_bulbon.gif"}}</script><imgid="myimage"src="../pic_bulboff.gif"onclick="f1()"alt=""width="100"height="150"><p>点击灯泡开关灯</p></body></html>
2.先获取元素再添加事件
例如
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
将鼠标覆盖句柄与函数myFunction绑定在一起
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p><buttonid="myBtn">点我</button><pid="demo"></p><script>var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);functionmyFunction(){
document.getElementById("demo").innerHTML +="Moused over!<br>"}functionmySecondFunction(){
document.getElementById("demo").innerHTML +="Clicked!<br>"}functionmyThirdFunction(){
document.getElementById("demo").innerHTML +="Moused out!<br>"}// 监听函数如何传递参数
document.getElementById("myBtn").addEventListener("click",function(){myFunction(p1, p2);});functionmyFunction(a, b){var result = a * b;
document.getElementById("demo").innerHTML = result;}</script></body></html>
总结
两种监听方式均可以达到效果,个人认为先获取后添加的句柄监听使用更为方便。
本文转载自: https://blog.csdn.net/apple_51931783/article/details/122767934
版权归原作者 酷尔。 所有， 如有侵权，请联系我们删除。
版权归原作者 酷尔。 所有， 如有侵权，请联系我们删除。