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>
相关文章
|
消息中间件 安全 Java
ulimit 命令详解
ulimit 命令详解
|
存储 编译器 C++
【C++】类和对象③(类的默认成员函数:拷贝构造函数)
本文探讨了C++中拷贝构造函数和赋值运算符重载的重要性。拷贝构造函数用于创建与已有对象相同的新对象,尤其在类涉及资源管理时需谨慎处理,以防止浅拷贝导致的问题。默认拷贝构造函数进行字节级复制,可能导致资源重复释放。例子展示了未正确实现拷贝构造函数时可能导致的无限递归。此外,文章提到了拷贝构造函数的常见应用场景,如函数参数、返回值和对象初始化,并指出类对象在赋值或作为函数参数时会隐式调用拷贝构造。
|
运维 安全 数据库
cmd中使用telnet检测远程的ip及端口是否处于监听状态
cmd中使用telnet检测远程的ip及端口是否处于监听状态
413 1
|
存储 数据采集 安全
信管第五章---信息系统工程(听课版)
【1月更文挑战第6天】乘风破浪会有时,直挂云帆济沧海
439 3
|
API 开发工具 开发者
全面的开发者文档和用户目标解析:API 文档指南和开发者旅程
开发者文档,也称为 API 文档,是一种专门针对软件开发人员的技术写作形式。这种类型的文档通常包括 API 的技术规范、代码注释、软件设计和架构以及软件开发中涉及的其他详细技术描述。开发者文档是开发人员的重要工具,因为它提供了使用和集成特定软件、库或 API 的必要指南、标准和示例。开发者文档的结构和内容的全面性会根据它所描述的软件的复杂性而大不相同,但主要目的是帮助开发人员理解、使用和高效地为软件做出贡献。
969 2
|
移动开发 JavaScript 前端开发
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解(学习总结---从入门到深化)
308 0
|
文字识别 自然语言处理 算法
它会不会成为OCR领域霸主?
它会不会成为OCR领域霸主?
507 0
|
机器学习/深度学习 人工智能 Windows
第五章:循环结构程序设计(练习题2.0)
第五章:循环结构程序设计(练习题2.0)
154 0
|
JavaScript 前端开发 PHP
什么是时间戳怎么获取
什么是时间戳怎么获取
204 0