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 事件绑定的元素

• 事件委托（事件代理）

  • 事件委托的优点 e.target.属性.xxx e.target.tagName
    1.可减少需要需要添加事件绑定的元素
    2.可给新增DOM元素添加事件（在不刷新页面的情况下）
  • 事件委托的缺点
    1.事件处理函数中需要判断事件源增加逻辑复杂度
    2.祖父级和事件源之间不能有阻止冒泡

• 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() 选中文本框内容方法