JS中的事件以及正则基础

【JS中的事件分类】
    * 1、鼠标事件：
    *  click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
    *
    * 2、键盘事件：
    *  keydown:键盘按下去触发
    *  keypress:键盘按下并松开的瞬间触发
    *  keyup:键盘抬起时触发
    *
    *  [注意事项：(了解)]
    *  ①执行顺序：keydown-keypress-keyup
    *  ②长按时，会循环不断 的执行keydown-keypress
    *  ③有keydown事件，不一定有keyup事件(事件触发过程中，鼠标移走，可能就没有keyup)
    *  ④keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有功能键(特殊除外)
    *  ⑤keypress区分大小写，keydown和keyup不区分；
    *  ⑥keydown/keyup区分主键盘和小键盘，keypress不区分；
    *
    *
    *  【确定键盘触发按键】
    *  ①在触发函数中，传入参数e，代表按键事件；
    *  ②通过e.keycode ,确认按键Ascii码值，进而确定按键；
    *  ③所有浏览器系统的写法(一般不必要)：
    *  var evn=e||event;//取到键盘事件   
    *  var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码

 

 

[JS中的DOM0事件模型]
    * 1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
    *  eg：<button onclick="func()">按钮</button>
    *  缺点：违反W3C关于HTML与JavaScript分离的基本原则；
    * 2、脚本模型：在JS脚本中通过事件属性进行绑定；
    *  eg:window.onload=function(){}
    *  局限性：同一节点，只能绑定一个同类型事件；
    *
    *【JS中的DOM2事件模型】
    * 1、添加事件绑定：
    *  IE10之前：btn1.attachEvent("onclick",函数)；
    *  其他浏览器：btn1.addEventListener("click",函数，true/false)；
    *  参数三：false(默认)，表示事件冒泡，true，表示事件捕获
    *
    *  兼容写法：if(btn1.attachEvent){
    *     btn1.attachEvent();
    *    }else{
    *     btn1.addEventListener();
    *    }
    *
    *  优点：同一节点，可以添加多个同类型事件的监听器；
    *
    * 2、取消事件绑定：
    * 注：如果要取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，而不能使用匿名函数，因为在取消事件绑定时，需要传入函数名；
    *  .removeEventListener("click",函数名)；
    *  .detachEvent("onclick",函数名)；

 

[JS中的事件流]
   * 1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
   *  DOM0模型，均为事件冒泡；
   *  IE中使用.attachEvent()添加的事件，均为冒泡；
   *  其他浏览器.addEventListener()添加的事件，当第三个参数为false时，为冒泡；
   *
   * 2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
   *  只有使用.addEventListener()添加事件，并设置第三个参数为true时，才进行捕获；
   *
   *  ↓ 当前元素 ↑
   *  ↓   ↑
   *  冒   父元素 捕
   *  ↓   ↑
   *  泡  爷爷元素 获
   *  ↓   ↑
   *  DOM根节点
   *
   * 3、阻断事件冒泡：
   *  IE浏览器中，将e.cancelBubble属性设为true;
   *  其他浏览器，调用e.stopPropagation();方法
   *  兼容写法：function myParagraphEventHandler(e) {
           e = e || window.event;
           if (e.stopPropagation) {
               e.stopPropagation(); //IE以外
           } else {
               e.cancelBubble = true; //IE
           }
       }
       
   3、阻止默认事件：
   *    IE浏览器中：将e.returnValue属性设为false；
   *    其他浏览器：调用e.preventDefault();方法
   *    兼容写法：function eventHandler(e) {
          e = e || window.event;
          // 防止默认行为
          if (e.preventDefault) {
              e.preventDefault(); //IE以外
          } else {
              e.returnValue = false; //IE  
          }
      }

 

 

　　　　[正则表达式]
    * 1、正则表达式包括两部分：
    *  ①定义的正则表达式规则  ②正则表达式的模式(g/i/m)
    *
    * 2、正则表达式的声明：
    *  ①字面量声明： var reg=/表达式规则/表达式模式          /white/g
    *  ②使用new关键字声明：  var reg=new RegExp("表达式规则","表达式模式");      var reg=new RegExp("white","g");
    *
    * 3、正则表达式常用方法：
    *  .test():检测一个字符串是否匹配某个正则模式，返回true、false
    *
    * 4、正则表达式的常用模式：
    *  g:全局匹配。不加g，默认非全局匹配，只匹配第一个符合条件的字符串
    *   "www".replace(/w/,"#")——>   #ww
    *   "www".replace(/w/g,"#")——>  ###
    *  i:忽略大小写。不加i，默认为需要匹配大小写
    *   "aAa".replace(/A/,"#")——>   a#a
    *   "aAa".replace(/A/i,"#")——>  #Aa
    *  m:匹配多行模式(字符串分多行显示，每行都有开头结尾)
    *   "abc         #bc
    *    abc".replace(/^a/g,"#")——> abc
    *   "abc         #bc
    *    abc".replace(/^a/gm,"#")——> #bc