什么是事件
- 用户和浏览器之间的交互行为我们就称之为事件,比如:点击/移入/移出
- 如何绑定事件
- 在JavaScript中所有的HTML标签都可以添加事件
- 元素.事件名称 = function(){};
- 当对应事件被触发时就会自动执行function中的代码
点击事件(onclick)
- 如果给元素添加了与系统同名的事件,我们添加的事件不会覆盖系统添加的事件
- 如果要用我们添加的事件覆盖系统同名的事件,在{}最后添加return false
定时器
- 在JavaScript中有两种定时器,一种是重复执行的定时器,一种是只执行一次的定时器
- 重复执行的定时器
- setInterval(function(){},隔多久执行一次)
- 关闭:clearInterval
- 只执行一次的定时器
- setTimeout(function(){},隔多久开始执行)
- 关闭:clearTimeout
移入移出事件
- 移入事件:onmouseover/onmouseenter
- 移出事件:onmouseout/onmouseleave
- 移动事件:onmousemove
表单事件
- 获取焦点:onfocus
- 失去焦点:onblur
- 内容改变
- onchange:只能在表单失去焦点后才能获取修改的数据
- oninput:想要实时获取用户修改之后的数据,只能通过oninput来调用(只支持IE9及以上)
- onpropertychange:在IE9以下,如果想实时获取用户修改后的数据,可以通过onpropertychange事件来实现
闭包
- 闭包是一种特殊的函数,当一个内部函数引用了外部函数的数据(变量/函数)时,那么内部的函数就是闭包,所以只要满足"是函数嵌套","内部函数引用外部函数数据"
- 只要闭包还在使用外部函数的数据,那么外部的数据就一直不会被释放,也就是说可以延长外部函数数据的生命周期
- 当后续不需要使用闭包时,一定要手动将闭包设置为null,否则会出现内存泄漏
- 在
ES6
中由于{}是块级作用域,所以只要在块级作用域定义了一个函数,并且这个函数用到了块级作用域中的数据,那么这个函数也是闭包
绑定事件的三种方式
-
通过onxxx添加:由于是给属性赋值,所以后赋值的会覆盖先赋值的
-
通过addEventListener添加:事件名称不用添加on,后赋值的不会覆盖先赋值的,IE9以下不支持
-
通过attachEvent添加:事件名称需要添加on,后赋值的不会覆盖先赋值的,IE9以下支持
//兼容写法 function addEvent(ele, name, fn) { if (ele.attachEvent) { ele.attachEvent("on" + name,fn); }else{ ele.addEventListener(name,fn); } }
事件对象
- 事件对象就是一个系统自动创建的对象,当注册的事件被触发时,系统就会自动创建事件对象
- 通过形参event传递给我们,兼容性写法:event = event || window.event
- 阻止默认行为
- return false;企业推荐的方法
- event.preventDefault();IE9以上浏览器
- event.returnValue = false;IE9以下浏览器
事件的三个阶段
- 捕获阶段(从外向内的传递事件)
- 当前目标阶段(执行事件回调函数)
- 冒泡阶段(从内向外的传递事件)
-
三个阶段只有两个会被同时执行,要么捕获和当前,要么当前和冒泡
-
如何设置事件捕获还是冒泡
- 通过addEventListener方法,这个方法接收三个参数
- 第一个参数:事件的名称
- 第二个参数:回调函数
- 第三个参数:false冒泡/true捕获
- onxxx不接收任何参数,所以默认就是冒泡
- attachEvent只能接收两个参数,所以默认也是冒泡
-
阻止事件冒泡
-
event.stopPropagation();只支持高级浏览器
-
event.cancelBubble = true;支持低级浏览器
//兼容写法 if(event.cancelBubble){ event.cancelBubble = true; }else{ event.stopPropagation(); }
-
-
移入移出事件区别
- onmouseover的移入事件会触发父元素的移入事件
- onmouseenter的移入事件不会触发父元素的移入事件
- onmouseout的移出事件会触发父元素的移出事件
- onmouseleave的移出事件不会触发父元素的移出事件
事件位置
- offsetX,offsetY:事件触发相对于当前元素自身的位置
- clientX,clientY:事件触发相对于当前浏览器可视区域的位置,不包括滚出屏幕的范围
- pageX,pageY:事件触发相对于整个网页的位置,包括滚出屏幕的范围
- screenX,screenY:事件触发相对于屏幕的位置
正则表达式
- 正则表达式就是对字符串操作的一种逻辑公式
- 通过构造函数创建正则表达式:let 变量名称 = new RegExp(匹配规则);
- 通过字面量创建正则表达式let 变量名称 = /匹配规则/;
- 正则表达式的作用
- 在字符串中"查找"是否包含指定子串(test)
- 从字符串中"提取"指定子串(match)
- 对字符串中指定的内容进行"替换"(replace)
- 正则表达式注意点
- 默认情况下,正则表达式中是区分大小写的
- 默认情况下,正则表达式匹配到第一个就会停止
网友评论