事件(上)
1 事件的组成：事件源+事件类型+事件处理函数
2 事件对象：window.event||e (e是事件处理函数的第一个形参)
3 鼠标坐标相关信息
- offsetX/offsetY :鼠标相对被点击元素(自身区域内)的距离(有兼容性问题)(四舍五入)
- pageX/pageY:鼠标相对页面的距离
- clientX/clientY:鼠标相对浏览器可视区域的距离
4 键盘按键相关信息
- 按键编码:e.keyCode||e.which
- 常见按键和编码对应表
13 Enter
8 Backspace
46 Delete
32 空格
27 Escape
38 上箭头
- 常见按键和编码对应表
- 按键名称:e.key
- 组合按键:shiftKey/ctrlKey/altKey
==> 事件对象.shiftKey：如果为true，说明shift被同时按下
==> 事件对象.altKey：如果为true，说明alt被同时按下
==> 事件对象.ctrlKey：如果为true，说明ctrl被同时按下
5 鼠标按键相关信息
-
e.button: 左键0，中间1，右键2
-
浏览器事件
load:浏览器资源加载完毕
scroll:浏览器滚动
resize:窗口大小变化
online:浏览器已获得网络访问
offline:浏览器已失去网络访问 -
鼠标事件
click 在元素上按下并释放任意鼠标按键。
contextmenu 右键点击（在右键菜单显示前触发）。
dblclick 在元素上双击鼠标按钮。
mousedown 在元素上按下任意鼠标按钮。
mouseenter 鼠标移到有事件监听的元素内。
mouseleave 鼠标移出元素范围外。
mousemove 鼠标在元素内移动时持续触发。
mouseover 鼠标移到有事件监听的元素或者它的子元素内。
mouseout 鼠标移出元素，或者移到它的子元素上。
mouseup 在元素上释放任意鼠标按键。 -
键盘事件
keyup 键盘抬起事件
keydown 键盘按下事件 -
表单事件
change 表单内容改变事件
input 表单内容输入事件
submit 表单提交事件
blur 失去焦点事件
focus 获取焦点事件 -
触摸事件
touchstart 触摸开始事件
touchmove 触摸移动事件
touchend 触摸结束事件
6 事件绑定
- onxxxx :同类事件会覆盖 ==>只能给一个元素注册一个同类事件
- 元素.addEventListener(‘事件类型’,‘事件处理函数’,‘是否捕获’);
- 事件解绑:removeEventListener
- 元素.attachEvent(‘on事件类型’,‘事件处理函数’)
==> 两个方式的区别
==> 注册事件的时候事件类型参数的书写
–> addEventListener不要写on
–> attachEvent要写on
==> 参数个数
–> addEventListener一般是三个常用参数
–> attachEvent一般是二个常用参数
==> 执行顺序
–> addEventListener顺序注册，顺序执行
–> attachEvent顺序注册，倒序执行
==> 使用浏览器
–> addEventListener:非IE7,8使用
–> attachEvent：IE7,8使用
事件
1 事件的传播:子元素的事件触发，父元素的同类事件也会触发
2 冒泡，捕获，目标
- 目标: e.target||e.srcElement
- 冒泡: 事件从目标开始依次向外触发，直到window
- 捕获: 事件从window开始依次向内触发，直到目标
事件监听
- 元素.addEventListener(‘事件类型’,‘事件处理函数’,‘是否捕获，默认false’)
- 新的事件:
==> mouseenter,也是鼠标移入事件,不会冒泡
==> mouseleave,也是鼠标移出事件,不会冒泡
==> mouseover,也是鼠标移入事件
==> mouseout,也是鼠标移出事件
3 事件委托：就是把子元素的事件绑定到父元素上
4 阻止冒泡
- 兼容写法:e.stopParpagation?e.stopParpagation():e.cancelBubble=true
- e.stopPropagation()
- e.cancelBubble = true;
5 阻止默认行为
- 兼容写法: e.preventDefault?e.preventDefault():e.returnValue = false
- e.preventDefault()
- e.returnValue=false;
总结
1 正则表达式:检测字符串的规则
2 创建正则表达式
var reg = /\d/gi
var reg = new RegExp('hello','ig')
3 正则表达式里面的字符
-
元字符:
- . ==> 匹配非换行的任意字符
- \ ==> 转义符，把有意义的符号转换成没有意义的字符串，把没有意义的字符串变成有意义的字符
- \s ==> 匹配空白字符
- \S ==> 匹配非空白字符
- \w ==> 匹配字母数字下划线
- \W ==> 匹配非字母数字下划线
- \d ==> 匹配数字
- \D ==> 匹配非数字
-
限定符
-
- ==> “前一个内容”出现至少1次，也就是出现1-正无穷次
-
- ==> “前一个内容”出现至少0次，也就是出现0-正无穷次
- ? ==> “前一个内容”出现0次或1次，也就是出现0-1次
- {n} ==> “前一个内容”出现n次
- {n,} ==> “前一个内容”出现至少n次,也就是出现n-正无穷次
- {n,m} ==> “前一个内容”出现n到m次
-
-
边界符
- ^ ==> 表示开头，修饰他后面的字符
- $ ==> 表示结尾，修饰他前面的字符
- ^$ ==> 表示精确匹配，内容必须是^和$里面的内容，不能多
-
特殊符号
- () ==> 限定一组元素
- | ==> 或者,正则里面的a|b,表示a或者b都可以
- [] ==> 字符集合,表示写在[]里面的任意一个都行
- [^] ==> 反字符集合,表示写在[]里面之外的任意一个都行
-
- ==> 表示范围,比如a-z表示小写字母
-
标识符
- i ==> 表示忽略大小写
- g ==> 表示全局匹配
4 正则的方法
-
reg.test(str);
==> 作用:用来查看正则表达式与指定的字符串是否匹配
==> 语法: reg.test(‘要检测的字符串’)
==> 返回值:如果匹配返回true,否则返回false，全局匹配标识符此处没有作用 -
reg.exec(str);
==> 作用:在指定的字符串中搜索符合正则的字符
==> 语法: reg.exec(‘要搜索的字符串’)
==> 返回值:把字符串中符合正则的第一个以及一些其他信息，以数组形式返回，找不到返回null，全局匹配标识符此处没有作用
5 字符串的方法
-
str.search(reg)
==> 作用:查找字符串中是否有满足正则条件的内容
==> 语法: str.search(reg)
==> 返回值:有的话返回索引，没有返回-1,全局匹配标识符此处没有作用 -
str.match(reg)
==> 作用:找到字符串中符合正则条件的内容返回
==> 语法: str.match(reg)
==> 返回值:
–> 没有标识符g，是和exec方法一样
–> 有标识符g，是返回一个数组，里面是匹配到的每一项 -
str.replace(reg,newSubStr)
==> 作用:找到字符串中符合正则条件的内容并替换掉
==> 语法:str.replace(‘要被替换的字符或者是正则’,‘新的字符’)
==> 返回值:替换好的新字符串
–> 没有标识符g,只替换第一个匹配的
–> 有标识符g，替换所有匹配的
ES5 ES6
1 JSON
- JSON.parse:把json字符串转js对象/数组
- JSON.stringify:把js对象/数组转成json字符串
- 不认识函数，例如：转换时数组里面有函数则转换为null
2 this
- this关键字
==> 每个函数内部都有一个关键字this
==> 重点:函数内部的this只和函数的调用方式有关，和函数的定义方式没有关系
==> 函数内部的this指向谁，取绝于函数的调用方式 - 普通函数调用：window
- 事件函数调用：事件源
- 对象的方法调用：对象
- 定时函数调用：window
3 使用call/apply/bind可以改变this指向(是强行改变this指向的方法)
-
call: 函数名.call(新this指向,实参1，实参2，…)
- 参数:如果想不改变this的指向，第一个参数写:null
-
apply: 函数名.apply(新this指向,[实参1，实参2，…])
- 参数:如果想不改变this的指向，第一个参数写:null
-
bind: var newFn = 函数名.apply(新this指向)
- 原函数this指向不变，返回的新函数newFn的this指向变了
- 箭头函数的this指向无法改变
4 let/const
- let和const不能重复声明
- let和const没有预解析
- let和const有块级作用域
- let声明的时候可以不赋值，const声明的时候必须赋值
- let可以重新赋值，const不能重新赋值
5 箭头函数
- 重点:箭头函数只能简写函数表达式，不能简写声明式函数
// 如只有一个形参可以省略(),但是如果形参有默认值，不能省略()
var fn = (形参1=默认值1,形参2)=>{
// 函数代码，如果只有一句，省略{},会自动return
}
// 特殊的:
// 箭头函数没有this，他的this根据上下文确定
// 箭头函数没有arguments
6 解构赋值
var obj = {a:100,b:200};
var {a,b} = obj;
var un = "zhangsan"
var pw = "123";
var p1 = {un,pw};
var arr = [1,2,3];
var {a0,a1,a2} = arr;
7 模板字符串：${变量}
==> 以前使用:'',""
==> es6中我们表示字符串的时候使用``(反引号)
==> 反引号和""的区别
1 反引号可以换行书写
2 反引号可以直接在字符串里面拼接变量,里面使用变量:${变量}
8 展开运算符: …
9 BigInt:任意大的整数
- 是一种内置对象，他提供了一个方法表示大于Math.pow(2,53)-1的整数
- 这个数字是Number能表示的最大数
10 Symbol
==> 一种基本数据类型
==> 使用Symbol()会返回Symbol类型的值
==> 每个Symbol()函数返回的Symbol值都是唯一的
==> Symbol值目前只能作为对象属性的标识符
11 Set对象是值的集合，类似数组：size，add(),delete(),clear(),has()
==> Set中的元素只会出现一次，即set中的元素是唯一的
12 Map类似对象：size,set(),get()
- 语法：var num=new Map([".":"."],[])
76
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
