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)