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>
目录
打赏
0
0
0
0
31
分享
相关文章
|
5月前
|
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
122 0
js之内置对象学习
js之内置对象学习
46 0
循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
Vue.js中使用.self修饰符来处理事件冒泡
Vue.js中使用.self修饰符来处理事件冒泡
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
JS 函数节流和函数防抖的区别(JS 与 Vue 用法)
JS 函数节流和函数防抖的区别(JS 与 Vue 用法)
117 0
JS的精髓,事件详解
鼠标单击 单击事件onclick,如点击某个按钮弹出一个提示框。这里要特别注意一点,单击事件不只是按钮才有,任何元素我们都可以为它添加单击事件!
173 0
JS的精髓,事件详解
JS基础-DOM对象
浏览器网页就是一个Dom树形结构!
109 0