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

简介: 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>
相关文章
|
6月前
|
JavaScript
JS绑定事件的三种方法(简单易懂)
JS绑定事件的三种方法(简单易懂)
|
JavaScript 前端开发
JS什么是事件处理
JS什么是事件处理
|
1月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
41 0
|
6月前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
38 11
|
6月前
|
JavaScript
JS绑定事件的几种方法
JS绑定事件的几种方法
44 0
|
自然语言处理 JavaScript
【js】超详细js函数基础
【js】超详细js函数基础
87 1
|
6月前
|
JavaScript 前端开发
js中的事件监听函数是什么
js中的事件监听函数是什么
57 0
|
JavaScript 前端开发
Vue 和 jQuery 两者之间的区别是什么?
Vue 和 jQuery 两者之间的区别是什么?
106 0
|
JavaScript
js绑定事件的方法?
js绑定事件的方法?
|
JavaScript 前端开发
JS 中的自定义对象加 js 中的事件的详细讲解
JS 中的自定义对象加 js 中的事件的详细讲解
69 0