乐趣区

关于前端学习:JavascriptDOM事件

jiezi

  • 理解事件

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

    • 事件三要素：

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

  • 事件绑定的分类

  • DOM 0 级事件：事件源.on 事件类型 = 事件处理函数
    毛病：因为是赋值式函数，所以只能绑定一个事件处理函数

  • 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
退出移动版