javaScript之Event事件
事件监听器
- 事件绑定和事件监听的区别
- 事件绑定:两个相同事件绑定事件,后边的会覆盖前边的,只会执行最后一个
- 事件监听:两个相同事件绑定事件,会依次执行
- addEventListener(type,lister[,options|useCapture])
- 第三个参数:默认不给布尔值,默认是冒泡事件。如果布尔值是true,进行捕获,false不捕获
- 事件流 元素标签包含在div/body/html中,执行元素事件会一层一层执行
- 事件冒泡 执行子元素事件的同时,父元素如有同样事件,也会执行,执行顺序由小到大
- 事件捕获 由大到小执行,html >body > div > 元素标签
- 事件监听相关配置 第三个参数还可以传递对象
- capture 是否在捕获阶段执行 true开启捕获
- once 是否只执行一次 true只执行一次
- passive 阻止取消默认事件 浏览器给的功能都是默认事件(行为) true不允许阻止
- 阻止浏览器默认行为 e.preventDefault()
a.addEventListener('click',function(e){
alert('a');
// 阻止浏览器默认行为
e.preventDefault();
},{
// 阻止取消默认事件 true(不允许阻止) 、 false (允许阻止)
passive:false
});
- removeEventListener(event,fn) 取消事件监听 (不能用匿名函数)
div.removeEventListener('click',fn)
- 取消事件冒泡
p.addEventListener('click',function(e){
e.stopPropagation()
// ie支持
//e.cancelBubble = true;
})
Event 事件对象
-
Event.target、Event.currentTarget事件源
- function(e) e事件对象-存储了和该事件相关的属性
- e.target 事件触发的目标源元素 是个冒泡事件
- e.currentTarget 事件绑定的元素
- function(e) e事件对象-存储了和该事件相关的属性
-
事件委托(事件代理)
- 事件委托的优点 e.target.属性.xxx e.target.tagName
1.可减少需要需要添加事件绑定的元素
2.可给新增DOM元素添加事件(在不刷新页面的情况下) - 事件委托的缺点
1.事件处理函数中需要判断事件源增加逻辑复杂度
2.祖父级和事件源之间不能有阻止冒泡
- 事件委托的优点 e.target.属性.xxx e.target.tagName
-
mousenter、mouseleave事件
- 如果鼠标移入或者移出子元素范围,mouseover 和 mouseout 会触发
- mouseenter 和 mouseleave 不受子级元素干扰
-
Event.stopPropaga、tion()、Event.cancelBubble 取消冒泡
- 元素本身有事件,不想执行父级身上的事件
- e.cancelBubble = true 取消事件冒泡
- e.stopPropagation() = true 取消事件冒泡 标准方法
- 元素本身有事件,不想执行父级身上的事件
-
Event.clienX、Event.clienY 获取鼠标点击的位置(相对于显示区域左上角的位置、坐标)
-
Event.pageX、Event.pageY鼠标位置获取 (相对于页面左上角位置、坐标)
contextmenu事件 自定义右键菜单
- return false(在事件绑定中失效)和Event.preventDefault()阻止浏览器默认事件 包括右键菜单 标准方法
键盘事件
- keydown 键盘按下
- keyup 键盘弹起
- e.keyCode 键码
- e.key 键值
- e.ctrlKey ctrl键 可返回布尔值 判断是否按下
- e.altKey alt键 可返回布尔值 判断是否按下
- e.shiftKey shift键 可返回布尔值 判断是否按下
- 组合键
拖拽思路详解
- mousedown(鼠标按下)、mousemove(鼠标移动)、mouseup(鼠标抬起)
- 拖拽公式:元素当前位置 = (鼠标当前位置 - 鼠标初始位置)+ 元素初始位置
- 拖拽修复问题
- 限制范围拖拽
鼠标滚动事件
- mousewheel 滚轮方向获取 只兼容谷歌
- Event.wheelDelta 滚轮向上 120 滚轮向下 -120
- DOMMouseScroll 滚轮方向获取 只兼容火狐
- Event.detail 滚轮向上 -3 滚轮向下 3
其他常用事件
- dblclick 双击时触发
- blur 失去焦点时触发 事件
- focus 获取焦点时触发
- change 在失去焦点时执行,如果内容发生变化时内容改变才会触发
- input 在内容发生变化时会立即触发,比change灵敏度高
- submit 提交表单事件
- reset 重置表单事件
- blur() 失去焦点方法
- focus() 获取焦点方法
- select() 选中文本框内容方法