JavaScript事件

最新推荐文章于 2025-08-12 14:37:12 发布

原创最新推荐文章于 2025-08-12 14:37:12 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了如何使用三种不同的方式在HTML中为按钮元素绑定点击事件，包括通过`onclick`属性、`addEventListener`方法以及直接操作DOM元素。详细讲解了每种方法的实现和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绑定事件的三种方法

<!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>
    <button id="btn" >点我</button>
</body>
</html>
<script>
    var btn=document.getElementById("btn");

btn.onclick=function(){
	alert("我是第一种绑定事件的方法");
}

btn.addEventListener("click",function(){
	alert("我是第二种绑定事件的方法");
},false)



var btn_2 = document.getElementsByTagName('button')[0];
var fn = function () {
        alert('第三种方法')
    }
    btn_2.addEventListener('click', fn, false);

    // 添加时间监听   
    // 获取元素
    // 元素.addEventListener('事件名'，函数，true)
</script>