事件和正则表达式

一、事件

1. 事件的组成，赋值式绑定事件举例

   • obox.onclick = function(eve){}
   • obox：事件源
   • on：绑定事件的方式
   • click：事件类型
   • function：事件处理函数
   • eve：事件对象，有兼容，需要主动获取

2. 事件对象的获取方式

   • var e = eve || window.event;

3. 事件对象身上的属性

   • 鼠标类
     • 坐标类…
     • button：配合鼠标的按下事件，检测鼠标的按键
   • 键盘类
     • var kc = e.keyCode || e.which
     • 功能键…
   • 元素类
     • var tgt = e.target || e.srcElement;
   • 阻止冒泡
   • 阻止默认
     • 默认事件：没有写，自己有
     • 什么时候需要阻止，阻止谁？
       • 谁有，阻止谁

4. 事件流的顺序

   • 捕获 -> 目标 -> 冒泡
   • ie没有捕获，只有冒泡
   • 而且所有浏览器默认都是冒泡状态
   • 捕获需要使用事件监听式绑定事件方法，触发
   • 捕获：从外向内，从根元素到目标元素
   • 冒泡：从内向外，从目标元素到根元素

5. 绑定事件的方式

   • 赋值式
     • obox.onclick = function(){}
     • 0兼容，不能重复绑定，只能冒泡
     • 删除：obox.onclick = null;
   • 监听式
     • obox.addEventListener(“click”,function(){},false)
     • 有兼容，能重复绑定，最后一个参数控制冒泡 或 捕获
     • 兼容处理
       • 正常：addEventListener
       • IE：attachEvent
     • 删除方式
       • 正常：removeEventListener
       • IE：detachEvent

6. 事件委托

   • 将多个后代元素的相同事件，委托给共同的页面上现有的父元素，利用事件冒泡，配合事件对象身上的事件目标，找到真正要点击的元素
   • 好处：
     1. 节省内容
     2. 可以给页面上暂时不存在的元素绑定事件（给动态的html绑定事件）

7. 事件源和事件目标

   • 事件源：
   • 事件目标：

8. 网页上的元素拖拽

   • 事件结构

   obox.onmousedown = function(eve){
       var downE = eve || window.event;
   
       document.onmousemove = function(eve){
           var e = eve || window.event;
           
       }
       document.onmouseup = function(){
           
       }
   }
   

二、正则

1. 概念和意义

   • 概念：
     • 正则表达式，正则对象，正确的规则，描述字符串的规则
     • 正则一般都是配合字符串使用
     • 可以对字符串进行：验证，替换，查询
   • 意义：
     • 快速的验证，查询，替换字符
     • 除非极端情况，正则既可以节省操作，又可以节省性能
     • 证明：6正则的意义.html

2. 如何创建正则

   • 字面量

     var reg1 = /正则的内容/;
     

   • 构造函数

     var reg2 = new RegExp();
     

   • 字面量正则中不允许出现变量，构造函数可以，但是使用都是一致的

3. 如何使用

   • 验证，替换，查询
   • 正则的方法
     • 验证：reg.test(str) ***
       • 默认验证局部字符串（是否包含）
         • 只要字符串中，有一部分符合，就符合
       • 整体验证，需要标记开头和结尾
         • 从第一位开始验证，验证到最后一位
         • ^：开始
         • $：结束
     • 查询：reg.exec(str)
       • reg.exec(str)
       • 每次查询时，会在上次查询结束的位置继续查询
       • 直到查询到最后，返回null
       • 继续回到初始位置，开始查询
       • 但其实，正则开始验证的位置，是可修改的
         • 正则的属性：reg.lastIndex
         • 表示查询到字符的某个位置的索引
   • 字符的方法
     • 替换：str.replace(reg,“newStr”) ***
       • 替换
     • 查询：str.match(reg) ***
       • 根据指定规则，查询字符串中符合的子串，放在一个数组中
     • 查询：str.search(reg)
       • 第一次出现的位置的索引

4. 如何写

   • "乱码"该怎么写，有什么含义
   • 修饰符
     • g：全局匹配
     • i：忽略大小写
   • 量词
     • +：一个或以上
     • *：零个或以上
     • ?：零个或一个
     • {n}：固定n次
     • {n,}：至少n次，以上
     • {n,m}：至少n次，最多m次
   • 或：|
   • 子集：()
   • 范围符：-
   • 中元符：[]，用来标记范围，内部所有组成都是或的关系
   • 转义符：
     • \d，表示所有的数字，等同于[0-9]
     • \w，表示所有的数字字母下划线，等同于[0-9a-zA-Z_]
     • \s，表示空格，等同于：
     • \D，表示除了数字，等同于[^0-9]
     • \W，表示除了数字字母下换线，等同于[^a-z0-9A-Z_]
     • \S，表示除了空格，[^\s]
   • 非：^，必须在中元符内使用

5. 读别人的正则

6. 正则的应用

   • 表单验证
   • 敏感词过滤
   • 查询指定字符，返回成数组