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级事件:事件绑定; 只执行func3document.getElementById("btn0").onclick = func2;document.getElementById("btn0").onclick = func3;// dom2级事件:事件监听; 两个函数都会执行document.getElementById("btn2").addEventListener("click", func4);document.getElementById("btn2").addEventListener("click", func5);
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/583153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从外网访问内网服务器:安装到使用一站通

如果你所在的是一个小的实验室&#xff0c;可能并没有大型的服务器集群而是仅是配备了小型服务器&#xff0c;日常工作便是在在局域网内访问服务器进行各项数据处理。因为在外网无法访问内网服务器&#xff0c;极大的限制了我们偶尔在外想监测一下数据的欲望。本文介绍了一种简…

策略模式(及案例)

策略模式 1.策略接口 定义一组算法或操作的通用接口&#xff0c;通常是一个抽象类或接口。该接口声明了策略类所必须实现的方法。 示例&#xff1a; class Strategy {doOperation() {} }2.具体策略 实现策略接口&#xff0c;提供具体的算法实现。每个具体策略类负责处理一…

二、C#基础语法( 函数与方法)

在C#语言中&#xff0c;函数和方法都是用于实现特定功能的代码块。虽然它们有一些相似之处&#xff0c;但它们在使用和定义上有一些细微的差别。 函数&#xff08;Functions&#xff09; 函数在C#中是独立的功能单元&#xff0c;执行特定操作并返回一个值。函数的定义以关键字…

postman win7 低版本 postman7.0.9win64 postman7.0.9win32

百度网盘&#xff1a; postman7.0.9win64&#xff1a; 链接: https://pan.baidu.com/s/18ck9tI0r9Pqoz36MOwwnnQ 提取码: rkf7 postman7.0.9win32&#xff1a; 链接: https://pan.baidu.com/s/1HrpGPrgvVzyAcjdHuwVOpA 提取码: ke5k win7系统安装postman&#xff0c;可能会…

postman使用-04响应

文章目录 响应响应界面说明Pretty&#xff1a;格式化显示&#xff0c;以便查看Raw&#xff1a;不进行任何处理&#xff0c;显示响应数据的原始格式Preview&#xff1a;预览响应体&#xff0c;会自动换行&#xff0c;不会格式化&#xff08;有时候是数据&#xff0c;有时候是页面…

leetcode151. 反转字符串中的单词

题目描述 给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意&#xff1a;输入字符串 s中可能会存在前导…

测试-FastJSON和Jackson-JSON库

文章目录 FastJSONJackson注意 FastJSON 直接读代码&#xff1a; Log4j2 public class FastJsonTest {Testpublic void test1() {// JSON转对象-parseObjectString jsonString "{\"name\":\"张三\",\"age\":18}";Student student …

实战 | 使用OpenCV快速去除文档中的表格线条(步骤 + 源码)

导 读 本文主要介绍如何使用OpenCV快速去除文档中的表格线条,并给详细步骤和代码。 背景介绍 测试图如下,目标是去除下面三张图中的表格线条,方便后续图像处理。 实现步骤 下面演示详细步骤,以图1为例: 【1】获取二值图像:加载图像、转为灰度图、OTSU二值化 i…

日本it培训班,日本IT大体分几类?

日本是一个老龄化极其严重的国家&#xff0c;拜泡沫经济破灭后的经济停滞所赐&#xff0c;民众取得了节育方面的丰硕成果&#xff0c;然而当经济终于走出阴霾&#xff0c;呈现复苏迹象时&#xff0c;短缺的劳动力又成了一大问题&#xff0c;拖累整个经济的步伐。为了应对劳工市…

仪表盘、数据分析新增分享功能及应用服务下新增服务实例菜单

近期&#xff0c;博睿数据根据一体化智能可观测平台 Bonree ONE 产品本身&#xff0c;以及用户反馈进行持续的更新和优化。以下为 Bonree ONE 产品功能更新报告第03期内容&#xff0c;更多探索&#xff0c;未完待续。 本次迭代的更新集中在平台的仪表盘、数据分析新增分享功能&…

C++面向对象(OOP)编程-C++11新特性详解

C11作为一个重要的版本&#xff0c;引入了很多新的特性&#xff0c;解决了C语言本身很多遗留的内存泄露问题&#xff0c;并且提供了很多比较灵活的用法。引入的auto&#xff0c;智能指针、线程机制都使得C语言的灵活性、安全性、并发性有了很大的提升。 本文会比较详细的介绍C1…

Kubernetes 学习总结(41)—— 云原生容器网络详解

背景 随着网络技术的发展&#xff0c;网络的虚拟化程度越来越高&#xff0c;特别是云原生网络&#xff0c;叠加了物理网络、虚机网络和容器网络&#xff0c;数据包在网络 OSI 七层网络模型、TCP/IP 五层网络模型的不同网络层进行封包、转发和解包。网络数据包跨主机网络、容器…

IntelliJ IDE 插件开发 | (四)开发一个时间管理大师插件

系列文章 IntelliJ IDE 插件开发 |&#xff08;一&#xff09;快速入门IntelliJ IDE 插件开发 |&#xff08;二&#xff09;UI 界面与数据持久化IntelliJ IDE 插件开发 |&#xff08;三&#xff09;消息通知与事件监听IntelliJ IDE 插件开发 |&#xff08;四&#xff09;开发一…

未来编程语言什么样?编译解释兼方为王

○、编程语言的未来&#xff1f; 随着科技的飞速发展&#xff0c;编程语言在计算机领域中扮演着至关重要的角色。它们是软件开发的核心&#xff0c;为程序员提供了与机器沟通的桥梁。那么&#xff0c;在技术不断进步的未来&#xff0c;编程语言的走向又将如何呢&#xff1f; …

storyBook play学习

场景 在官方给出的案例中&#xff0c; Page.stories.js import { within, userEvent } from storybook/testing-library import MyPage from ./Page.vueexport default {title: Example/Page,component: MyPage,parameters: {// More on how to position stories at: https:/…

使用Mybatis-plus分页查询的Total与实际条数不对应

现象 对于单表查询是没有问题的。而需要多表关联查询&#xff08;自写sql&#xff09;时&#xff0c;就会查询调用Mybatis-Plus的.page(Page page,Wrapper queryWrapper); 可以看到后台实际执行sql有两个。 一个是查询sql的数据&#xff1a; selectvisit.id as id,visit.rfi…

Java中常见的日志包分析(Log4j、Logback、SLF4J等)

Java中常见的日志jar包包括Log4j、Logback、SLF4J、java.util.logging等。它们各自的作用和应用场景如下&#xff1a; 1. Log4j 作用&#xff1a;Log4j是Apache的一个开源项目&#xff0c;提供日志记录的功能&#xff0c;支持多种输出目的地&#xff0c;如控制台、文件、GUI组…

【银行测试】金融银行-理财项目面试/分析总结(二)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行理财相关的项…

再谈小米汽车

文章目录 1. 外观2. 电机3. 电池4. 风阻5. 强度6. 智能驾驶 我在两年前分析过小米造车的形势&#xff0c;大家可以 点击这里查看。今天小米官宣传了新汽车。看一下它公布的主要信息&#xff1a; 1. 外观 汽车外观是向保时捷致敬&#xff0c;因此它的外观特别像保时捷。不过外…

CSS 纵向扩展动画

上干货 <template><!-- mouseenter"startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。mouseleave"stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class"container&q…