1. KeyboardEvent事件
  2. InputEvent事件
  3. 滚轮事件
  4. 正则表达式–重复匹配和非贪婪匹配

KeyboardEvent:

  • UI组件、document、window都可以侦听此事件

  • keydown：

  • keydoup：

  • keydpress：

  • 移动小人：
  • 1
2
3
4

    //打算用setInterval
//e.repeat是否一直按键状态
//利用数组结构解决连续的状态码判断问题
//减少定时器的数量解决问题
  • 防抖：某一段时间内只执行一次

  • keyCode/which：键码

  • 1

    键盘按键：left	up	right	down:37-40

InputEvent：

  • 针对表单元素单独做失焦和聚焦处理

    • focus：聚焦
    • blur：失焦

  • 针对表单所有元素的失焦和聚焦

    • focusin
    • focusout
  • 1
2

    //e.relatedTarget
//上一个或者下一个目标对象，失焦就是下一个聚焦对象，聚焦就是上一个失焦对象

  • 超链接和所有表单元素都是可以做聚焦与失焦事件

  • input事件：
    • 1
2
3

      isComposing:true//判断是否使用输入法
data a//当前输入的数据
inputType:"insertText"//当前输入状态
  • 节流：间隔时间执行

滚轮事件：

  • 兼容事件、继承鼠标事件

  • mousewheel：火狐不支持

  • DOMMouseScroll：

  • 1
2
3

    deltaX:
deltaY:-100;向上
wheelDelatY:100;向上

  • 兼容写法：

  •  1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    document.addEventListener("mousewheel",mouseHandler);
document.addEventListener("DOMMouseScroll",mouseHandler);
function mouseHandler(e){
    var detail;
    if(e.type==="mousewheel"){
        detail=e.deltaY<0 ? -1 : 1;
    }else if(e.type==="DOMMouseScroll"){
        detail=e.detail<0 ? -1 : 1;
    }
    //console.log(e);
    //console.log(detail);
}
  • 自定义滚动条：

正则表达式：

  • 1

    var reg=/^(?=\D+\d)(?=.*[a-z])(?=/[A-Z])[0-9a-zA-Z]{8,16}$/

  • 字面量定义

  • 1

    var reg=/a/i;

  • 构造函数定义

  • 1
2

    new RegExp("正则内容","修饰符");
var reg=new RegExp("a","i");

  • 正则内容：目的–匹配字符串中的内容，或者查找字符串中的内容

  • 修饰符：

    • i：不区分大小写
    • m：多行
    • g：全局查找

  • 正则对象的方法：

    • reg.test();//判断字符串是否满足正则条件
    • reg.exec();//根据正则在字符串中查找到对应的元素，并且挡在数组中，有下标index属性和群组groups属性，一般g无效

  • 字符串对象可以使用正则方法：

    • str.replace();//替换

    • 1
2
3
4
5

      var arr=[];
str.replace(/e/g,function(a,b){
    arr.push(b);
})
console.log(arr);

    • 1
2

      var str="18617805540";
console.log(str.replace(/^(\d{3})\d{4}(\d{4})$/,"$1****$2"))

    • str.search();//查找，返回下标，对 g无效

    • 1

      str.search(/a(?=b)/g)//查找a后面为b的位置。

    • str.split();//切割

    • 1
2

      str.split(/[bcd]/)//可以多个字符切割
"config.jpg".split(/(?=\.)/)//["config", ".jpg"]

    • str.match();//匹配，所有匹配正则表达式的内容放在一个数组中。

    • 1
2
3

      var str="2[bc]3[de]";
var arr=str.match(/(\d)\[(\w+)\]/);
console.log(arr);

  • .通配符：代表任意一个字符,在 []中会自动转为字符 .，使用 \.也是字符 .

  • \转移字符：转译为字符串。本身在字符串中就有转义的含义

  • []可能代表一个字符的列表，可以使用里面的任意一个字符

    只能表示一个字符

  • [^abcd]在正则中括号内的第一个字符使用^开始，表示后续的内容取反

    [a^c]当^不是中括号中的第一位则表示字符^。

  • \w===[a-zA-Z0-9_]

  • \W===[^a-zA-Z0-9_]

  • \d===[0-9]

    \D===[ ^0-9]

    \s===空白字符 空格

    \S===非空白字符//字符与字符之间有空字符

重复匹配和非贪婪匹配：

  • {}表示重复次数：
    • {0，1}=== ?
    • {1,}=== +
    • {0,}=== *
  • ()\1 ：括号内最大重复次数 分类取出重复的最大次数
  • 非贪婪匹配：前后会有其他内容约束范围，
    • .*?
    • \b单词分隔符
    • \B非单词分隔符

网易地址截取