js 3种事件绑定实现

最新推荐文章于 2023-12-21 14:07:31 发布

原创最新推荐文章于 2023-12-21 14:07:31 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

知识点专栏收录该内容

29 篇文章

订阅专栏

文章展示了三种在JavaScript中绑定事件的方法：1)HTML内联事件处理；2)DOM元素的onclick属性；3)使用addEventListener方法。每种方法都配合代码示例说明了如何处理点击事件并打印相关信息。

有3种方法绑定事件

通过元素直接绑定事件
通过找元素再用事件处理绑定
通过找元素进行监听事件

直接上代码


<div id="btn1" onclick="clickBtn1(event)">
  btn1
</div>
<div id="btn2">
  btn2
</div>
<div id="btn3" >
  btn3
</div>

<script>
  function clickBtn1(event) {
    console.log(event,this,'点击事件，btn1')
  }

  document.getElementById('btn2').onclick=(event)=>{
    console.log(event,this,'点击事件，btn2')
  }

  document.getElementById('btn3').addEventListener('click',(event)=>{
    console.log(event,this,'点击事件，btn3')
  })

</script>