JavaScript 添加事件绑定的三种方法

1、使用 html 进行事件绑定
1.1、直接在 html 标签上写入事件类型和事件处理方法。

<button onclick = "alert('hello world')">click me!</button>

1.2、在 html 标签上写入事件类型,在 js 上写事件处理方法。

<button onclick = "sayHello()">click me!</button>

<script>
    function sayHello(){
      alert('hello world!!!')
    }
</script>

2、使用 JS 获取 dom 对象进行事件绑定
为了让代码更加整洁以及便于维护,使 html 代码与 js 代码解耦

<button id="btn">click me!</button>

<script>
    document.querySelector('#btn').onclick = sayHello;    //不要加括号!否则会立即调用,之后点击按钮就没反应了

    function sayHello() {
      alert('hello world')
    }
</script>

3、使用 addEventListener() 绑定事件
使用上面两种方法,只能绑定一个事件,如果要绑定多个事件,可以使用 addEventListener() 添加事件监听器,一般情况下传入两个参数,第一个参数是事件类型,第二个参数是事件处理方法。

<button id="btn">click me!</button>
 <script>
    document.querySelector('#btn').addEventListener('click',sayHello)
    document.querySelector('#btn').addEventListener('click',sayHi)

    function sayHello() {
      alert('hello world!')
    }
    function sayHi () {
      alert('hi!')
    }
</script>

4、onclick vs addeventlistener(click)

onclick 事件在同一时间只能指向唯一对象

addEventListener 对任何 DOM 都是有效的,而 onclick 仅限于 HTML

addEventListener 可以控制 listener的触发阶段(捕获/冒泡)

onclick 添加多次以后,后边的会覆盖前边的,addEventListener 则可以给多个事件添加 listener

未经允许不得转载:紫竹林-程序员中文网 » JavaScript 添加事件绑定的三种方法
关于我们 免责申明 意见反馈 隐私政策
程序员中文网:公益在线网站,帮助学习者快速成长!
关注微信

微信扫码
关注微信

技术交流群
管理员微信号
每天精选资源文章推送
管理员QQ
随时随地碎片化学习
管理员抖音号
发现有趣的