3种事件绑定的异同(js的问题)

html事件
dom0事件
dom2事件
        • 广义javascript ECMAScript + DOM + BOM DOM0 DOM1 DOM2
        • 狭义javascript ECMAScript ES6 ES5 ES3
事件监听的优点:可以绑定多个事件,常规的事件绑定只执行最后绑定的事件
事件绑定:相当于存储了函数地址,再绑定一个事件,相当于变量指向了另一个函数地址
事件监听:相当于订阅发布者,改变了数据,触发了事件,订阅这个事件的函数被执行
addEventListener函数

element.addEventListener(event, function, useCapture)
removeEventListener()

event        (必需)事件名
function     (必需)事件触发函数
useCapture   (可选)指定事件在捕获(tru)或冒泡(false)阶段执行


IE8: element.attathEvent(event, function)

event    (必需)事件名, 需加'on' eg: onclick
function (必需)事件触发函数
<button onclick="func1()">Html事件</button>
<button id="btn0">事件绑定</button>
<button id="btn2">事件监听</button>

<script>
  function func1() {
    console.log("func1");
  }

  function func2() {
    console.log("func2");
  }

  function func3() {
    console.log("func3");
  }

  function func4() {
    console.log("func4");
  }

  function func5() {
    console.log("func5");
  }

  // dom0级事件:事件绑定; 只执行func3
  document.getElementById("btn0").onclick = func2;
  document.getElementById("btn0").onclick = func3;

  // dom2级事件:事件监听; 两个函数都会执行
  document.getElementById("btn2").addEventListener("click", func4);
  document.getElementById("btn2").addEventListener("click", func5);
</script>

相关推荐

  1. 3事件异同js问题

    2023-12-29 05:00:04       57 阅读
  2. js中重复事件

    2023-12-29 05:00:04       38 阅读
  3. js定点击事件方法

    2023-12-29 05:00:04       30 阅读
  4. vue中事件过程

    2023-12-29 05:00:04       50 阅读
  5. vue动态class方法

    2023-12-29 05:00:04       38 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-29 05:00:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-29 05:00:04       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-29 05:00:04       82 阅读
  4. Python语言-面向对象

    2023-12-29 05:00:04       91 阅读

热门阅读

  1. 15. 三数之和

    2023-12-29 05:00:04       58 阅读
  2. SpringBoot-Shiro

    2023-12-29 05:00:04       64 阅读
  3. cfa一级考生复习经验分享系列(十一)

    2023-12-29 05:00:04       50 阅读
  4. SpringBean的初始化与销毁

    2023-12-29 05:00:04       56 阅读
  5. PHP之——函数的使用

    2023-12-29 05:00:04       54 阅读
  6. Redis雪崩效应是什么?

    2023-12-29 05:00:04       50 阅读
  7. 路径规划算法实现

    2023-12-29 05:00:04       55 阅读
  8. c++ 重写 重构 重载

    2023-12-29 05:00:04       45 阅读
  9. F-44 字段显示不全

    2023-12-29 05:00:04       49 阅读
  10. Python 自动程序数字炸弹游戏

    2023-12-29 05:00:04       54 阅读
  11. 【洛谷】爱与愁的心痛

    2023-12-29 05:00:04       56 阅读