zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    CF827D Best Edge Weight
    克鲁斯卡尔重构树总结
    模拟赛 提米树 题解 (DP+思维)
    luogu P4781 【模板】拉格朗日插值
    luogu P5826 【模板】子序列自动机
    子序列自动机
    luogu P1368 工艺 /【模板】最小表示法
    最小表示法
    SP1812 LCS2
    FZOJ 3602 T2
  • 原文地址:https://www.cnblogs.com/lwhvicky/p/6754427.html
Copyright © 2011-2022 走看看