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

  • 相关阅读:
    Head first javascript(七)
    Python Fundamental for Django
    Head first javascript(六)
    Head first javascript(五)
    Head first javascript(四)
    Head first javascript(三)
    Head first javascript(二)
    Head first javascript(一)
    Sicily 1090. Highways 解题报告
    Python GUI programming(tkinter)
  • 原文地址:https://www.cnblogs.com/lwhvicky/p/6754427.html
Copyright © 2011-2022 走看看