原生js给一个元素绑定click事件（三种实现方法）

返回上一步 / in 0

原生js给一个元素绑定click事件（三种实现方法）
第一种直接在DOM元素绑定


<div id="btn" οnclick="one()"></div> //直接在DOM里绑定事件
<script>
　　　　function one(){ 
　　　　    alert("hello"); 
　　　　}
</script>
1
2
3
4
5
6
7
第二种在js代码中绑定


<div id="aaa"></div>
<script>
　　document.getElementById("aaa").onclick = function（）{
　　     alert("在js中直接绑定");
　　  } //脚本里面绑定
</script>
1
2
3
4
5
6
7
第三种绑定事件监听函数

<div id='aaa'><div>
<script>
    document.getElementById('aaa').addEventListener('click',function() {
        alert('绑定事件监听函数')
    })
</script>

1
2
3
4
5
6
7
注意：用 “addeventlistener” 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 “onclick” 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
方式3注册了事件监听，还可以通过“removeListener”使用来取消监听。
 

搜索