js事件绑定函数

Posted 2020-09-21 kkdf

js中事件绑定方法大致有三种：

1.在DOM元素中绑定

<input  onclick="alert(‘在DOM中绑定‘)"  type="button"  value="点击我" />

也可以在onclick中填写函数，与addeventlistener不同的是，在onclick中的函数允许小括号，而后者不允许。

2.在javascript代码中绑定

<input  id="demo"  type="button"  value="点击我" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type"));  
}
</script>

3.通过事件绑定函数来绑定

<input type="button" id="myBtn" value="点我"/>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() 
{
    document.getElementById("demo").innerhtml = "Hello World";
}
</script>

其实1,2是同一种绑定方法，并且1，2同时存在时2会覆盖1，因为onclick是一种属性。

而第三种事件监听可以给同一个对象绑定多个函数，不会覆盖，而是依次执行。