DOM编程-事件（一）

最新推荐文章于 2023-02-07 08:37:29 发布
最新推荐文章于 2023-02-07 08:37:29 发布
阅读量254 收藏
点赞数
分类专栏： DOM 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39457740/article/details/76405193
版权

DOM事件

什么是DOM事件？

当我们在网页上操作的时候，比如当我们点击一个DOM元素，在键盘上按下按键，在输入框输入内容，当页面加载完成，这些都会触发DOM事件

事件流

什么是事件流呢?
事件流就是DOM事件的处理执行的过程。W3C中对DOM事件流有明确的定义。

image
（图片来自于W3C文档https://www.w3.org/TR/uievents/#dom-event-architecture）

如图，这是一棵DOM树，分为了三个部分：DOM树的顶端是window对象，接下来是document对象，在最底层，当我们点击后，就会产生一个click事件，事件传递过程如下

  • capture phase
    这个是事件的捕获过程，从window开始直到捕获到触发这个事件的节点的父元素,也就是图片上的tr。
  • target phase
    接下来这个目标节点也就是这个事件的触发过程。
  • bubble phase
    这个是冒泡过程，从当前事件节点的父节点开始冒泡到顶层的window对象

注意的几点：
1. 低版本IE不能很好的实现这个过程，没有捕获过程
2. 并不是所有事件都有这三个过程

Raaabbit
关注
专栏目录
DOM编程系列之事件
weixin_33850890的博客
09-02 97
事件 所谓事件就是是浏览器告知JavaScript程序用户的行为 事件的属性 HTML页面元素提供的事件属性 HTML页面元素提供的事件属性 -> 元素的属性分类之一 DOM提供了一系列的事件名称 示例代码: <body> <!-- HTML页面元素提供的事件属性 -> 元素的属性分类之一 ...
DOM 编程与事件
qq_34558909的博客
03-19 156
一 DOM ​ 前言: DOM(Document Object Model)是文档对象模型,是一套标准: html 和 xml都遵循这套标准! 1.1 DOM结构 1.2 获取DOM 节点的三种方式 //通过id 获取节点 document.getElementById("mydiv"); //通过名字获取节点 document.getElementsByName("input"); /...
DOM编程-事件（五）
Raaabbt GO!!
07-30 287
焦点事件FocusEvent处理元素获得焦点和失去焦点的事件，那么什么是获得焦点，什么是失去焦点呢？ 比如有一个input输入框，当我们用鼠标点击一下，会有一个光标出现，这时就获得了焦点；当我们点击其他地方的时候光标消失，这就失去了焦点。 事件类型 是否冒泡 元素 默认事件 元素例子 blur no window、element none wi
DOM编程-获取文本框的value
最新发布
heliuerya的博客
02-07 910
DOM编程-获取文本框的value
JavaScript DOM编程-通过DOM获取页面元素的方法
qq_49900295的博客
03-02 1738
文章目录一、什么是DOM？DOM树：1.文档：2.元素：3.节点：二、获取页面中的元素的几种方法：1.根据 id 获取元素2.根据标签名获取元素3.通过HTML5新增的方法获取元素4.根据特殊元素获取元素 一、什么是DOM？ DOM简称：文档对象模型，是一种处理可扩展编程语言的标准编程接口，我们通过这些接口来改变网页的内容、结构和样式。 DOM树： 1.文档： 一个网页就是一个文档，DOM中使用document表示 2.元素： 页面中的所有标签都是元素，DOM中使用element表示 3.节点： 网页
DOM学习---获取节点绑定事件
四岁爱上了她的博客
08-23 1332
这里写自定义目录标题DOM1.1 什么是DOM1.2 DOM树1.3获取元素1.3.1 根据ID获取1.3.2 根据标签名获取元素1.3.3 H5新增获取元素的方式合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 DOM 1.1 什么是DOM
JS DOM编程笔记 - 滚动事件（十八）
小帅的编程笔记
11-03 2743
今天我们来学习如何在JavaScript中处理滚动事件，如何优化滚动事件的性能。 滚动事件简介 当我们滚动页面或者在某个元素上滚动时就会触发滚动事件，我们可以通过以下方式触发滚动事件 使用右侧滚动条 使用鼠标滚轮 点击锚点链接 调用JS函数 要监听滚动事件，使用addEventListener()方法，事件名称为scroll，代码如下： targetElement.addEventListener('scroll', (event) => { // 处理滚动事件 }); 或者给目标元素的on
《JavaScript DOM 编程艺术》-- 总结
m0_61535378的博客
10-05 680
今天看完了JavaScript DOM 编程艺术，大概是用了三个星期的时间陆陆续续看完的。这本书关于JavaScript的知识点不多，但是展现的确实和标题一样，着重的是结构分离和平稳退化的思想，对于刚入门的新手，可以很好地建立良好的编程意识。下面总结一下。
JS-DOM编程-05-复选框的全选与取消全选
TSCCG的博客
08-07 1226
JS-DOM编程-05-复选框的全选与取消全选 1.当点击全选框时，选中所有复选框 复选框对象的checked属性代表复选框是否被选中： 如果值为true，则表示复选框被选中 如果值为false，则表示复选框未被选中 我们可以利用checked属性来实现功能。 在全选框中设置一个click事件，当点击全选框时，遍历所有复选框对象， 将全选框的checked属性值赋给所有复选框的checked属性。 <!DOCTYPE html> <html lang="en"> <head
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
此外，"JavaScript DOM编程艺术"可能还会涉及高级话题，如事件委托、动画效果、AJAX（异步JavaScript和XML）以及现代前端框架如何与DOM交互等内容。事件委托利用事件冒泡或捕获机制，只在父元素上设置一个监听器，...
DHTML手册免费下载---BOM、DOM编程-附件资源
03-05
DHTML手册免费下载---BOM、DOM编程-附件资源
shopping-list:DOM事件-Udemy课程
04-30
在本“购物清单”项目中，我们主要关注的是DOM（Document Object Model）事件以及如何利用JavaScript来处理这些事件。...通过这个项目，你可以深入理解DOM事件在实际应用中的工作原理，并提升JavaScript编程技能。
Javascript-DOM编程艺术研究.docx
11-17
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
JavaScript-DOM编程
qq_46096136的博客
09-30 7358
那么邮箱地址的正则表达式和邮箱地址进行匹配，能匹配成功，表示合法，反之表示不合法。第三：要能够独立的从网络当中搜索到你想要的正则表达式（搜索能力要有）[a-zA-Z0-9]{3,} 前面这堆中的任意字符至少出现3个。注意：数量永远匹配的都是前面的那个字符出现的次数。\W 匹配任意不是字母，数字，下划线，汉字的字符。[a-z]{1} a到z所有的字符中的任意1个。正则表达式是有一堆特殊的符号组成的一个表达式。[1-9] 没有指定数量的时候，默认是1个。其实在JS中，字符串String也是支持正则表达式的。
解决移动端页面的touchstart和touchmove冲突
Raaabbt GO!!
03-19 6032
解决移动端页面的touchstart和touchmove冲突 最近在写一个小项目，移动端的投票工具，作为一个第一次写移动端的菜鸟，问题出现了： 为什么一滑屏幕就触发了一堆touchstart事件呀（摔！！！） 基本概念 touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事...
表单验证失败阻止提交
Raaabbt GO!!
02-09 4490
表单验证失败阻止提交 提交表单的时候往往需要经过验证表单的内容是否符合要求，我们举一个例子 &amp;lt;form action=&quot;/search&quot; id=&quot;search&quot; name=&quot;search&quot; method=&quot;GET&quot;&amp;gt; &amp;lt;div class=&quot;u-search&qu
JS动画函数的封装
Raaabbt GO!!
10-05 1733
JS动画函数的封装 有很多常用的JavaScript功能实现，我们不妨将它们封装起来，方便以后的使用。 下面是我对JavaScript动画动画函数的封装，参考了其他人的博文，如果有冒犯，请联系我。 闲话少说，贴上demo<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
前端知识点——Web Sockets
Raaabbt GO!!
02-24 932
前端知识点——Web Sockets 本系列文章是我在实习面试之前的对自己掌握的知识点的总结，就从一直不太熟悉的webSockets开始吧～ WebSockets的第一印象： 可以创建和服务器进行双向会话的高级技术，取代了曾经使用的轮询方法。 API WebSocket：用于连接WebSocket服务器的对象 CloseEvent：关闭连接时WebSocket对象触发的事件 MessageE...
JavaScript DOM编程：事件处理与DOM对象详解
本文档主要介绍了JavaScript DOM编程的基础知识，特别是关于事件处理程序的方式和DOM对象的操作。首先，事件处理程序方式有三种方法：1）在HTML标签上添加事件属性，如通过`oncontextmenu`属性阻止用户右键菜单的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值