JavaScript中添加监听句柄的方式
时间：2022-07-27 11:17:19|栏目：JavaScript代码|点击： 次
前言：
监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件
一、效果展示
鼠标聚焦、鼠标移开、鼠标点击等等都可以作为监听句柄
二、句柄合集
- 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>
总结:
两种监听方式均可以达到效果,个人认为先获取后添加的句柄监听使用更为方便。
栏 目：JavaScript代码
下一篇：滚动条代码生成器
本文标题：JavaScript中添加监听句柄的方式
本文地址：http://www.codeinn.net/misctech/209071.html
