52-节点属性，DOM事件0级,2级,3级事件，事件冒泡,捕获，event事件对象，事件委托

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量201 收藏
点赞数 3
分类专栏： Web前端Js笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47462646/article/details/135740914
版权
Web前端Js笔记 专栏收录该内容
31 篇文章 0 订阅 ¥99.90 ¥299.90
订阅专栏
本文详细介绍了DOM中的节点属性，包括nodeName、nodeValue和nodeType。接着讲解了DOM事件的三个级别，特别是DOM2级的addEventListener和removeEventListener，以及DOM3级的滚动和滚轮事件。事件流的概念，包括事件冒泡和捕获的顺序。event事件对象的重要方法如stopPropagation、preventDefault和stopImmediatePropagation。最后，文章探讨了事件委托这一性能优化策略及其应用案例。
摘要由CSDN通过智能技术生成

1.在DOM中，每一个节点都是一个对象。DOM节点有三个重要的属性：nodeName：节点的名称、nodeValue：节点的值、nodeType：节点类型

(1)nodeName:节点的名称，只读

  1. 元素节点的nodeName与标签名相同(大写)
  2. 属性节点的nodeName是属性的名称
  3. 文本节点的nodeName永远是#text
  4. 文档节点的nodeName永远是#document

(2)nodeValue：节点的值

  1. 元素节点的nodeValue是undefined或null
  2. 文本节点的nodeValue是文本自身
  3. 属性节点的nodeValue是属性值

(3)nodeT

了解本专栏 订阅专栏 解锁全文
吴椰啵
关注
专栏目录
订阅专栏
js之事件冒泡，事件捕获，事件委托
01-08
事件冒泡、事件捕获和事件委托是JavaScript事件模型中的三个重要概念。 首先，事件捕获是一种事件处理机制，它从DOM树的根节点（window对象）开始，向下遍历到目标元素。这种机制使得事件首先在最不具体的节点（即...
事件委托、事件冒泡与事件捕获
weixin_43613849的博客
05-09 5715
事件委托： 1、原理 那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了
JavaScript中事件绑定和DOM事件流(冒泡和捕获)-案例详解
JackieDYH的博客
07-19 633
方法1：把函数绑定在HTML标签上 也叫HTML元素行间事件 <button onclick="btnClick()">我是oBtn，点击我</button> function btnClick() { console.log(this, 'oBtn被点击了') // this指向 window对象 } 方法二：把函数赋值给DOM元素的事件处理程序属性 也叫DOM 0级事件处理程序 一个DOM元素对象拥有很多事件处理程序属性(onclick是这些属性之一，其他还有很多
DOM2级事件基础知识入门
z-ying-jian的博客
02-26 904
DOM2级事件是通过addEventListener添加事件的，IE8及以下是通过attchEvent DOM2绑定事件 box.addEventListener(&amp;amp;quot;click&amp;amp;quot;,callback,false); //IE8及以下 box.attachEvent(&amp;amp;quot;onclick&amp;amp;quot;,fn) 说明(addEventListener) 第一个参数：事件的类型（DOM0绑定
js基础（二）：事件（事件冒泡、事件捕获、事件对象、事件委托）
ThisEqualThis的博客
11-11 3066
事件 javascript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。 事件流 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡（event bubbling）,即事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，...
DOM事件类型、event对象，最详解析。
热门推荐
LeslieCheung_的博客
05-11 1万+
目录事件对象（一）DOM中的事件对象⑴ 示例⑵ 所有事件都有的event对象的属性和方法① currentTarget | this | targer 的区别 事件对象 在触发DOM上的某个事件时，会产生一个事件对象event，这个事件对象包含着所有与事件有关的信息，例如事件是冒泡还是捕获，事件的目标，鼠标坐标，键盘按下的键，等等信息，不要太好用 下面一起来看看event事件对象都有哪些内容吧。 （一）DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论DOM0
JavaScript 之 DOM(Web API、DOM、事件高级（事件冒泡、事件委托）)
Andrelia的博客
11-06 1100
一、Web API简介 目标： 能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性 能够说出什么是 API 能够说出什么是 Web API 1. Web APIs和JS基础关联性 1.1 js的组成： 2. API和Web API 2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是...
JS--JavaScript使用event对象、event对象属性、方法和事件委托
吴声子夜歌的博客
09-26 1102
使用event对象 event对象由事件自动创建，代表事件的状态，如事件发生的源节点，键盘按键的响应状态，鼠标指针的移动位置，鼠标按键的响应状态等信息。event对象的属性提供了有关事件的细节，其方法可以控制事件的传播。 2级 DOM Events 规范定义了一个标准的事件模型，它被除了IE怪异模式以外的所有现代浏览器所实现，而IE定义了专用的、不兼容的模型。 在DOM事件模型中，event对象...
JavaScript DOM事件流事件捕获事件冒泡
lixiaosenlin的专栏
09-08 7701
事件 在讲事件流之前，我们先来了解一下事件。 JavaScript与HTML之间的交互是通过事件来实现的。事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。我们可以使用侦听器（或事件处理程序）来预订事件，以便事件发生时执行相应的代码。说白了，就是当我们对页面上的某些元素进行某些操作（比如鼠标单击）时产生一些特定的行为。比如鼠标单击一个按钮然后弹出一个对话框。这里就涉及到了按钮的click事件，产生的行为就是弹出了一个对话框。 事件最早是在IE3和Netscape Navigator2 中出现的，当
js事件高级(事件监听,事件对象,DOM事件流,事件委托)
清风的博客
09-09 384
事件高级 1.注册事件(2种方式) 1.1传统注册方式 利用on开头的事件 onclick; <button onclick="我是最帅的" ></button>; btn.onclick = function(){ }; 特点:注册事件的唯一性; 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数; 1.2监听注册方式 addEven...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
例如，在提供的代码示例中，当点击id3元素时，事件首先在捕获阶段执行obj2和obj3绑定的函数，然后在冒泡阶段执行obj1绑定的函数，因此显示顺序为id2、id3、id1。 `addEventListener`方法用于添加事件监听器，它接收...
event-dom:DOM事件
05-04
DOM事件模型由三个级别组成：DOM0级事件、DOM2级事件和DOM3级事件。DOM0级是最基础的，通过直接在元素上设置`addEventListener`和`removeEventListener`方法来添加和移除事件监听器。DOM2级引入了事件目标、事件流...
JavaScript Event学习第五章 高级事件注册模型
10-29
`false`参数表示事件在冒泡阶段处理，如果设置为`true`，则在捕获阶段处理。W3C模型的一个关键特性是事件处理程序的执行顺序未定义，这意味着同时绑定的多个处理程序可能按任意顺序执行。 移除事件处理程序同样简单...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 899
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 434
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 442
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 606
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 344
【代码】如何使用Redisson的布隆过滤器？
理解DOM事件：从DOM0到DOM3级事件处理
"这篇文章主要介绍了DOM事件的三个级别——DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。DOM0级事件处理是最早的事件处理方式，通过在HTML元素上直接设置属性来触发函数。DOM2级事件处理引入了事件监听器的概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吴椰啵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值