以Event对象为例详述JavaScript中添加事件的三种方式
程序员文章站
2022-03-09 08:13:12
...
-
JavaScript中的Event事件
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，常用事件如下：
-
JavaScript中添加事件的三种方式
-
通过在标签中为对应事件添加设定值来添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中添加事件</title>
</head>
<body>
<input type="button" class="botton" value="添加事件" οnclick="a()"/>//设置了一个按钮，显示文本为“添加事件”，当检测到鼠标点击时触发function a
<script>
function a(){
console.log("添加成功");//function a功能为在控制台反馈
}
</script>
</body>
</html>
效果为：
-
通过属性筛选来添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中添加事件</title>
</head>
<body>
<input type="button" class="botton" value="添加事件"/>
<script>
document.getElementsByClassName("botton")[0].οnclick=function(){//document对象代表当前该HTML文档
//getElementsByClassName()方法能通过class名来筛选出所有满足条件的html元素，返回结果为一个数组。
console.log("点击了。。。。。");
}
</script>
</body>
</html>
-
通过事件监听器来添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中添加事件</title>
</head>
<body>
<input type="button" class="botton" value="添加事件"/>
<script>
document.getElementsByClassName("botton")[0].addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
console.log("点击");
})
</script>
</body>
</html>
值得注意的是：事件监听器中的事件名与event对象中的方法名有所不同，区别在于没有“on”前缀