DOM事件+正则表达式
一、DOM事件
事件是文档或浏览器窗口发生的，特定的交互瞬间，JS与HTML之间的交互通过事件来实现的
- 例如：
- 瀑布流
- 轮播图
1、事件流
- 事件流——描述的是从页面中接受事件的顺序
- IE公司——事件冒泡流
- Netscape公司——事件捕获流
1.1 事件冒泡
事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至不具体的那个节点
<div id="box"><input type="button" value="按钮" id="btn"></div>
1.2 事件捕获
- 与事件冒泡相反
- 不太具体的节点应该最早接收到事件，而最具体的节点最后接受到事件
- 老版本浏览器不太支持
2、事件类型
2.1HTML事件处理程序
- 事件是直接加载html中的
- 代码示例
//（1）事件是直接加载HTML中的<div id="box"><input type="button" value="按钮" id="btn" onclick="alert('hello')"></div>
//（2）封装到一个函数里<div id="box"><input type="button" value="按钮" id="btn" onclick="showMessage()"></div><script>function showMessage(){alert('hello');}</script>
- 缺点： HTML和JS代码紧密的耦合在一起，如果要修改的话，需要修改HTML代码和JS代码，因此很不方便
2.2 DOM 0级
- 是较为传统的方式——把一个函数赋值给一个事件的处理程序属性
- 在第四代浏览器中出现
- 现在也是各种浏览器用的比较多的方法
- 优点：简单、跨浏览器
- 没有HTML事件处理的缺点
- 移除事件绑定的时候，我们只需要赋值为null；
2.3 DOM 2级
- DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作
- addEventListener()和removeEventListener()
- 通过原型链找到这个方法，然后执行完成事件绑定的效果，浏览器会给当前元素的某个事件行为开辟一个事件池（事件队列）**浏览器有一个统一的事件池，每个元素绑定的行为都放在这里，通过相关标志区分，当我们通过 addEventListener进行事件绑定的时候，会把绑定的方法放在事件池中；当元素的某一行为被触发，浏览器回到对应事件池中，把当前放在事件池的所有方法按序依次执行
- 接受三个参数：
- 要处理的事件名
- 作为事件处理程序的函数
- 函数布尔值（true:表示在事件捕获阶段调用程序；false:表示在事件冒泡阶段处理程序）
- 通过**addEventListener()添加的事件，只能通过removeEventListener()**删除
- 如果 addEventListener() 添加的事件处理函数是匿名函数，则无法通过 removeEventListener() 删除这个事件处理程序。
- 可以为一个元素添加多个事件处理程序。
- 2级DOM包含3个事件事件捕获阶段、处于目标阶段和事件冒泡阶段
- 流程：1次事件的发生包含三个过程：(1)事件捕获阶段，(2)事件目标阶段，(3)事件冒泡阶段
2.4 DOM 3级
- DOM浏览器中可能发生的事件有很多种，不同事件类型具有不同的信息，DOM3级事件规定了一下几种事件
UI事件当用户与页面上的元素交互时触发
焦点事件当元素获得或者失去焦点时触发
鼠标事件当用户通过鼠标在页面上执行操作时触发
滚轮事件当使用鼠标滚轮或类似设备时触发
文本事件当在文档中输入文本时触发
键盘事件当用户通过键盘在页面上执行操作时触发
合成事件当为IMEInput Method Editor输入法编辑器输入字符时触发
变动事件当底层Dom结构发生变化时触发
- DOM3级还定义了自定义事件自定义事件不是由DOM原生触发的它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由
createEvent("CustomEvent");
2.5 IE事件处理程序
- attachEvent()添加事件
- detachEvent()删除事件
- 接收两个参数：要处理的事件名（有on）、作为事件处理程序的函数
- 不支持第三个参数的原因是：IE8以及更早的浏览器只支持事件冒泡
- 支持IE事件处理程序的浏览器：IE和OPERA
3、跨浏览器的事件处理程序
- 见演示
4、事件委托
本来该自己做的事情，委托给别人做。利用的是事件冒泡原理，使用event.target获取触发事件的目标元素。
好处：
- 提高性能，只需要注册一次事件，也方便移除事件。解决事件处理程序过多的问题，在DOM树中尽量最高的层次上添加一个事件处理程序，只指定一个事件处理程序，就可以管理某一类型的所有事件。
- 给动态生成的元素添加事件。可以解决动态生成的子元素绑定不上事件的问题。
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
例子：见演示
二、正则表达式
Regular Expression 使用单个字符串来描述、匹配一系列符合某个语法规则的字符串，即按照某种规则去匹配符合条件的字符串，而正则表达式就是这种规则
- 图形工具
- 示例
^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$
- 示例
1、REGEXP对象
- JS中通过内置对象RegExp支持正则表达式
- 有两种方法实例化RegExp对象
- 字面量
- 构造函数
- 修饰符
2、元字符
- 正则表达式由两种基本字符类型组成
- 原义文本字符
- 元字符
| 字符 | 含义 |
|---|---|
| \t | 水平制表符 |
| \v | 垂直制表符 |
| \n | 换行符 |
| \r | 回车符 |
| \0 | 空字符 |
| \f | 换页符 |
| \cX | 与X对应的控制字符（Ctrl+X） |
3、 字符类
- 一般情况下正则表达式一个字符对应字符串一个字符
- 表达式
ab\t的含义是
- 当想要匹配某些字符，而不是单个的某个字符，我们可以使用元字符
[]来构建一个简单的类 - 所谓类是指符合某些特性的对象，一个泛指，而不是特指某个字符
- 表达式[abc]把a/b/c归为一类，表达式可以匹配这类的字符
- 元字符应用（见演示）
字符类取反
- 使用元字符
^创建反向类/负向类 [^abc]不是字符a,b,c的内容
4、范围类
- 使用字符类匹配字母或数字很复杂
- 使用
[a-z]表示a到z，闭区间包含a,z - 在
[]组成的类的内部可以连写，如[a-zA-Z0-9]
5、预定义类与边界
5.1 预定义类
| 字符 | 等价类 | 含义 |
|---|---|---|
| . | [^\r\n] | 除了回车符和换行符之外的所有字符 |
| \d | [0-9] | 数字字符 |
| \D | [^0-9] | 非数字字符 |
| \s | [\t\n\x0B\f\r] | 空白符 |
| \S | [^\t\n\x0B\f\r] | 非空白符 |
| \w | [a-zA-Z_0-9] | 单词字符（字母、数字下划线） |
| \W | [^a-zA-Z_0-9] | 非单词字符 |
- 例：匹配
ab+数字+任意字符的字符串ab[0-9][^\r\n]
5.2 边界
| 字符 | 含义 |
|---|---|
| ^ | 匹配输入字符串的开始位置，以xxx开始 |
| $ | 匹配输入字符串的结束位置，以xxx结束 |
| \b | 单词边界 |
| \B | 非单词边界 |
6、量词
| 字符 | 含义 |
|---|---|
| ？ | 出现零次或一次（最多出现一次） |
| + | 出现一次或多次（至少出现一次） |
| * | 出现零次或多次（任意次） |
| {n} | 出现n次 |
| {n,m} | 出现n到m次 |
| {n,} | 至少出现n次 |
7、贪婪与非贪婪模式
- 贪婪模式：尽可能多的匹配
- 非贪婪模式：让正则表达式尽可能少的匹配，也就是说一旦成功匹配不再继续尝试就是非贪婪模式
8、分组
匹配字符串Bluemsun出现四次的场景
- 使用（）可以进行分组，是量词作用于分组
8.1 或
- 使用
|可以达到或的效果 Amy|Tom
8.2 反向引用
8.3 忽略分组
- 不希望捕获某个分组，只需要在分组内加上
?:就可以 - (?:abcdef)(gh)
9、前瞻后顾
- 正则表达式从文本头部向尾部开始解析，文本尾部方向，称为“前”；文本头部方向，称为“后”
- 前瞻就是正则表达式匹配到规则的时候，向前检查是否符合断言，后顾/后瞻方向相反
- 符合和不符合特定断言称为肯定/正向匹配和否定/负向匹配
// 前瞻：
A(?=B) //查找B前面的A
// 后顾：
(?<=B)A //查找B后面的A
// 负前瞻：
A(?!B) //查找后面不是B的A
// 负后顾：
(?<!B)A //查找前面不是B的A
- 前瞻例子
\w(?=\d)
10、JS对象属性
- global——是否全文搜索，默认false
- ignoreCase—— 是否大小写敏感，默认false
- mutiline——多行搜索，默认false
- lastIndex：当前正则表达式匹配内容的最后一个字符的下一个位置
- source:正则表达式的文本字符串
11、正则表达式对象的两个处理方法
11.1 test()
- 用于测试字符串参数中是否存在匹配正则表达式模式的字符串
- 存在返回true，不存在返回false
11.2 exec()
使用正则表达式模式字符串执行搜索，并将更新全局RegExp对象的属性以反映匹配的结果
如果没有匹配到文本则返回null，否则返回一个数组
- index属性：声明匹配文本的第一个字符的位置
- input属性：存放被检索的字符串的string
调用非全局的RegExp对象的exec()时，返回数组：
- 第一个元素是正则表达式相匹配的文本
- 第二个元素是与RegExpObject的第一个子表达式相匹配的文本（如果有的话）
- 第三个元素是与RegExpObject的第二个子表达式相匹配的文本（如果有的话），以此类推
12、字符串对象处理方法
12.1 search() 方法
- 用于检索字符串中指定的子字符串或检索与正则表达式相匹配的字符串
- 方返回第一个匹配的结果index,查找不到则返回-1
- search()方法不支持全局匹配，它将忽略标志g，并且总是从字符串开始进行搜索
12.2 match()方法
- 将检索字符串，以找到一个或多个regexp匹配的文本
- regexp是否具有标志g对结果影响很大
- 没有标记g，方法只执行一次
- 如果没有找到任何匹配的文本，返回null
- 否则返回一个数组，其中存放了与它找到的匹配文本有关的信息
- 返回数组的第一个元素存放的是匹配文本，其余元素存放的是与正则表达式的子表达式匹配的文本
- 除了常规的数组元素之外，返回的数组还含有2个对象属性
- index 声明匹配文本的起始字符在字符串的位置
- input 声明对stringObject的引用
- 与exec区别：
- 字符串.march（正则表达式）
- 正则表达式.exec(字符串)
12.3 split()方法
- 分隔字符串成数组
- 复杂的分隔可以使用正则
12.4 replace()方法
- str.replace(strChar,replaceStr)
- str.replace(reg,replaceStr)
- str.replace(reg,function)
DOM事件+正则表达式相关推荐
- JS学习笔记（一）DOM事件和监听
将事件绑定到元素身上的三种方法: 1.HTML事件处理程序(不推荐使用) 1 <a onclick="hide()"> 2.传统的DOM事件处理程序 即在目标DOM事件 ...
- IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...
- 深入理解DOM事件机制
前言 本文主要介绍: DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一.DOM事件级别 针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级 ...
- 彻底理解H5的DOM事件
我们大家都知道,人与人之间的交流可以通过语言,文字,肢体动作,面部微表情等,但是你知道Javascript和HTML之间是通过什么进行交互的么?你又知道Javascript和HTML之间是如何进行交互 ...
- 归纳DOM事件中各种阻止方法
前言 在复习事件这块的时候,发现了一个问题,网上很多文章对事件阻止这块解析的并不全面,并且有些文章也有错误之处,于是想自己总结一下,也方便自己的复习. 知识预热 事件冒泡和捕获 在看本篇文章之前,需要 ...
- javaScript的使用（5）DOM事件
dom事件 浏览器监听特定的条件或用户行为,并且触发相应的操作(函数) 常见的dom事件如下: onclick:单击事件 onfocus:焦点事件 onblur:失去焦点事件 onkeydown:键盘 ...
- javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
- addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡
当一个HTML元素触发一个事件时,该事件会在元素结点与根结点之间的路径传播.传播按顺序分为三个阶段:捕获阶段.目标阶段.冒泡阶段,这个传播过程就是 DOM 事件流. 事件冒泡就是当一个HTML元素出发 ...
- 理解DOM事件流的三个阶段 - Lxxyx的开发笔记 - SegmentFault 思否
本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来,对DOM事件了解甚少.一般也只是用用onclick来绑定个点击事件.在寒假深入学习JavaScript时,愈发 ...
- DOM 事件深入浅出（二）
在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性 ...
最新文章
- device or resource busy_北海or涠洲岛旅游攻略(收藏篇)
- 一篇带你搞透回溯算法
- 2013江苏计算机二级vfp试题,2013年计算机二级VFP上机试题及答案解析51
- C/C++ ini配置文件的格式及如何读写ini配置文件
- Centos7 下安装mariadb及其基本操作
- java并发编程工具类辅助类：CountDownLatch、CyclicBarrier和 Semaphore
- AD学习之旅（10）— 导入元器件到PCB文件
- 重启服务器iis网站400,重启IIS服务的几种方法小结
- ubuntu下安装teamview
- docker安装elasticsearch教程
- 海马体启发的记忆模型
- 微信刷票怎么查实_怎么检查“微信公众平台投票”是否有刷票？
- 【论文研读】-用于约束多目标优化的新型双阶段双种群进化算法
- 计算机导论模板,计算机导论论文提纲范文模板 计算机导论论文大纲怎样写
- pythonpost请求修改编码格式_Python请求编码POST d
- 基于单片机的防盗门窗系统设计(#0451)
- 互联网行业发展形势乱弹--娱乐和社交
- 对软件工程这门课的疑问
- 网吧软件限制的小技巧
- Mac Carthage