关于前端学习:JavascriptDOM事件

理解事件

• 事件是指提前与浏览器设定好的一些行为，当用户触发这些行为时，将执行一个事件处理函数

• 事件三要素：

  1. 事件源：将事件绑定在某个元素身上
  2. 事件类型：触发事件的行为形式
  3. 事件处理函数：当触发行为后，须要执行一个函数

事件绑定的分类

DOM 2级事件:

• 规范浏览器语法：

  事件源.addEventListener('事件类型', 事件处理函数,事件执行程序)`

  参数：至多两个参数，能够绑定多个事件处理函数，函数由上至下执行，第三个参数设置事件执行程序，false 示意事件冒泡程序执行，true 示意事件捕捉程序执行

• IE低版本浏览器语法：

  事件源.attachEvent('on事件类型', 事件处理函数)

  只有两个参数，能够绑定多个事件处理函数，函数由下至上执行

事件的解绑

• DOM 0级事件的解绑
  事件处理函数是赋值式函数，所以事件解绑间接从新赋值为null即可
  语法：事件源.on事件类型 = null
• DOM 2级工夫的解绑
  留神点：DOM 2级事件解绑时，事件处理函数须要是一个具名函数

规范浏览器的事件解绑
  事件源.removeEventListener('事件类型', 事件处理函数)

IE低版本浏览器的事件解绑
  事件源.detachEvent('on事件类型', 事件处理函数)

DOM 2级事件绑定与解绑的兼容

// 捕捉段落元素
var p1 = document.getElementById("p1");
// 定义事件处理函数1
var f1 = function () {
  p1.style.background = 'blue';
};
//定义事件处理函数2
var f2 = function () {
  p1.style.background = 'red';
  //兼容IE低版本浏览器
  if (p1.detachEvent) {
      p1.detachEvent("onmouseover", f1);  //登记事件mouseover
      p1.detachEvent("onmouseout", f2);   //登记事件mouseout
  }
  //兼容规范浏览器
  else {
      p1.removeEventListener("mouseover", f1);  //登记事件mouseover
      p1.removeEventListener("mouseout", f2);   //登记事件mouseout
  }
};
// 兼容IE低版本浏览器
if (p1.attachEvent) {
  p1.attachEvent("onmouseover", f1); // 绑定事件mouseover
  p1.attachEvent("onmouseout", f2);  // 绑定事件mouseover
}
//兼容规范浏览器
else {
  p1.addEventListener("mouseover", f1); // 绑定事件mouseover
  p1.addEventListener("mouseout", f2);  // 绑定事件mouseover
}

DOM 操作罕用事件

鼠标事件：

• 鼠标左键单击事件：click
• 左键双击单击事件：dblclick
• 右键单击事件：contextmenu
• 滚轮滚动事件：mousewheel
• 鼠标任意键按下事件：mousedown
• 鼠标按键抬起事件：mouseup
• 鼠标挪动事件：mousemove
• 鼠标移入事件：mouseover
• 鼠标移出事件：mouseout
• 鼠标移入事件(不会进行事件流传)：mouseenter
• 鼠标移出事件(不会进行事件流传)：mouseleave

键盘事件：（只有表单元素、document、window触发）

• 键盘按下事件 (不辨别中英文)：keydown
• 键盘抬起事件 (不辨别中英文)：keyup
• 键盘按下事件 (字符必须确定输出后才触发)keypress

浏览器事件：（事件源为 window）

• 页面加载事件：load
• 页面滚动事件：scroll
• 监督窗口尺寸变动事件：resize
• 网络断开：offline
• 网络复原：online
• 哈希值变动：hashchange

表单事件：（只能绑定给表单元素）

• 表单内容扭转（聚焦前与失焦后内容不同）：change
• 表单输出内容：input
• 表单聚焦：focus
• 表单失焦：blur
• 表单提交（只能绑定给 form 标签）：submit
• 表单重置（只能绑定给 form 标签）：reset

拖拽事件：（一般元素拖拽事件须要增加 draggable="true"属性）
残缺的拖拽事件须要 拖拽元素 和 指标元素

• 开始拖拽（绑定给拖拽元素）：dragstart
• 拖拽挪动（绑定给拖拽元素）：drag
• 完结拖拽（绑定给拖拽元素）：dragend
• 拖拽元素进入指标元素（绑定给指标元素）：dragenter
• 拖拽元素来到指标元素（绑定给指标元素）：dragleave
• 拖拽元素在指标元素内挪动（绑定给指标元素）：dragover
• 拖拽元素在指标元素内撒手（绑定给指标元素）：drop

触摸事件：（只能在挪动端失效）

• 触摸开始：touchstart
• 触摸挪动：touchmove
• 触摸完结：touchend

其余事件

• 过渡完结（过渡几个属性就触发几次）：transitionend
• 抉择开始（框选文档时触发）：slectstart
• 窗口暗藏于显示（只能绑定给 Document）：visibilitychange

获取事件对象——event

获取事件对象的办法

div.addEventListener('click',function(event){
  // 兼容解决
  // 事件处理函数中的event形参中蕴含事件对象信息
  // window.event 是兼容IE的语法
  event=event||window.event
  console.log(event)
})

事件对象信息之鼠标事件信息

• 获取鼠标按下的按键：button属性
  语法：event.button
  属性值为0示意鼠标左键，属性值为1示意是滚轮键，属性值为2示意鼠标右键

• 获取鼠标光标的地位：
  1.光标到可视窗口左上角间隔（不包含页面卷去的宽高）
  语法：

  X轴坐标：event.clientX
  Y轴坐标：event.clientY
  
  body.addEventListener('mousemove',function(event){
      event=event||window.event
      console.log(event.clientX,event.clientY)
  })

  
  2.光标到文档流左上角间隔（包含页面卷去的宽高）

  // IE8以下不反对
  X轴坐标：event.pageX
  Y轴坐标：event.pageY
  
   body.addEventListener('mousemove',function(event){
      event=event||window.event
      console.log(event.pageX,event.pageY)
   })

  
  3.光标到元素左上角间隔（元素外部有子元素时受到影响）

  X轴坐标：event.offsetX
  Y轴坐标：event.offsetY
  
  // 增加 pointer-event:none 款式，光标到事件源元素左上角间隔将不会收到影响
  
  div.addEventListener('mousemove',function(event){
      event=event||window.event
      console.log(event.offsetX,event.offsetY)
  })

事件对象信息之键盘事件信息

• 获取按下的键值(IE8以下不反对)：key属性
  语法：event.key
• 获取按下的键值码(FireFox 低于20 的版本不反对，须要应用which 属性)：keyCode 属性
  语法：event.keyCode
  兼容解决语法：event.keyCode||event.which

• 判断按下的是不是Ctrl、Shift、Alt、Win键

  1. ctrlKey 属性示意 ctrl键
  2. shiftKey 属性示意 shift键
  3. altKey 属性示意 alt键（mac 上示意 options键）
  4. metaKey 属性示意 win键（mac 上示意 command键）
     按键按下后属性值为true，否则为falase

事件流传

• 当在一个元素触发一个事件时，会依照构造父级程序一层一层往上流传，直到 window 完结流传
• 当触发一个事件时，会依照构造父级程序向上传递给同类型事件
• 事件对象信息中的path属性示意以后事件流传的门路
• 获取事件流传的门路（不反对 IE 低版本）：event.path
  返回值：事件流传的门路

事件的指标

• 事件指标指精确触事件的元素，通过 targe属性可获取事件指标
• 获取事件指标：event.target||event.srcElement
  返回值：事件触发的元素

事件的冒泡和捕捉

• 依照 指标 到 window 的程序执行所有事件叫做事件的冒泡
• 依照 window 到 指标 的程序执行所有事件叫做事件的捕捉
• addEventListener()的第三个参数设置事件执行程序
• false 示意事件冒泡程序执行，true 示意事件捕捉程序执行
  

阻止事件流传

• 当元素触发行为时，为了避免执行多个元素的事件处理函数，咱们须要阻止事件的流传

规范浏览器语法：形参名.stopPropagation()
IE 低版本浏览器：ecacelBubble = true

兼容语法①：
if (event.stopPropagation){
  event.stopPropagation()
}
else{
  event.ecacelBubble = true
}
兼容语法②：
try{
  event.stopPropagation()
}
catch(err){
  event.ecacelBubble = true
}


// 应用案例
div.addEventListener('click',function(event){
  event=event||window.event
  event.stopPropagation()
  console.log('div触发事件')
})
body.addEventListener('click',function(event){
  event=event||window.event
  event.stopPropagation()
  console.log('body触发事件')
})

事件委托

• 事件委托是指 利用事件冒泡，将子元素的事件绑定在一个独特的父元素身上
• 事件委托的长处：缩小元素的事件绑定；缩小DOM的操作，进步性能；对增加的元素也可执行事件，不须要从新绑定事件
• 事件委托的注意事项：事件委托须要委托给独特的构造父级；事件处理函数中应用事件指标去判断；留神事件指标的兼容解决；如果判断的是 nodeName 或tagName 须要应用大写

阻止浏览器的默认行为

浏览器默认行为指 浏览器本省就有的事件行为

• a 标签自带点击行为
• form 标签自带表单提交行为
• 内容框选 自带框选成果行为
• 鼠标右键 自动弹出菜单

阻止浏览器的默认行为语法:

• 规范浏览器：形参名.preventDefault()
• IE 低版本：形参名.returnValue = false
• 兼容解决语法：

语法①：
if (event.preventDefault){
  event.preventDefault()
}
else{
  event.returnValue = false
}
语法②：
try{
  event.returnValue = false
}
catch(err){
  event.preventDefault()
}
return false