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>
相关文章
|
8月前
|
JavaScript
JS绑定事件的三种方法(简单易懂)
JS绑定事件的三种方法(简单易懂)
|
3月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
62 0
|
4月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
JavaScript
js基础笔记学习90-window对象1
js基础笔记学习90-window对象1
64 0
js基础笔记学习90-window对象1
|
JavaScript
js基础笔记学习91-window对象2
js基础笔记学习91-window对象2
55 0
js基础笔记学习91-window对象2
|
JavaScript 前端开发
JS的精髓,事件详解
鼠标单击 单击事件onclick,如点击某个按钮弹出一个提示框。这里要特别注意一点,单击事件不只是按钮才有,任何元素我们都可以为它添加单击事件!
162 0
JS的精髓,事件详解
|
Web App开发 缓存 JavaScript
|
JavaScript 前端开发
js原型继承的原理解析
js原型继承的原理解析
129 0
|
存储 移动开发 缓存
《JS原理、方法与实践》- window对象
《JS原理、方法与实践》- window对象
125 0