前言
监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件
一、效果展示
鼠标聚焦、鼠标移开、鼠标点击等等都可以作为监听句柄
二、句柄合集
<!-- onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 用户在一个HTML元素上移动鼠标 onmouseout 用户从一个HTML元素上移开鼠标 onkeydown 用户按下键盘按键 onload 浏览器已完成页面的加载 onclick 失去焦点 onfocuse 获取焦点 -->
三、添加监听的两种的方式：
1.将事件与函数绑定在一起
例如将点击监听句柄与f1函数绑定起来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function f1() { element=document.getElementById("myimage") if(element.src.match("bulbon")) { element.src="../pic_bulboff.gif" } else{ element.src="../pic_bulbon.gif" } } </script> <img id="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绑定在一起
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p> <button id="myBtn">点我</button> <p id="demo"></p> <script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "Moused over!<br>" } function mySecondFunction() { document.getElementById("demo").innerHTML += "Clicked!<br>" } function myThirdFunction() { document.getElementById("demo").innerHTML += "Moused out!<br>" } // 监听函数如何传递参数 document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; } </script> </body> </html>
总结
两种监听方式均可以达到效果,个人认为先获取后添加的句柄监听使用更为方便。
