事件绑定

是小小小前端呀
370 阅读2分钟

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

事件绑定

  1. DOM0级事件绑定 元素.onxxx = function(){} 原理 每一个DOM元素对象都有很多内置的私有属性，其中包含onxxx这样事件类的私有属性 =》 DOM0事件绑定原理，给这些事件类私有属性赋值（当我们触发相关事件行为的时候，浏览器会帮助我们把赋值的函数触发执行），特点 1： 如果不存在某个事件类型的私有属性，则无法基于这种方式做事件绑定（DOMContextLoader[等待DOM资源加载完触发的事件]） 特点2 只能给当前元素的某个事件类型绑定一个方法（私有属性只能复制一个值）
  2. DOM2级事件绑定 - -

  • addEventListener/removeEventListence/dispatchEvent 所有DOM元素对象含window 都是EventTarget的实例 标准浏览器。

  • 非标准浏览器 attachEvent /detachEvent ie<= 8

  • xxx.addEventListener('xxx事件',function(){},false)

  • DOM2事件绑定的原理

    1. 利用浏览器的事件池机制来完成事件的监听和绑定的
    2. 特点1 所有的事件类型都可以基于这种方式进行事件绑定 （例如window.addEventListener("DOMContentLoader",function(){})）
    3. 特点2 可以给当前元素的某一个事件类型绑定多个不同的方法
window.onload 和document.ready 区别（$(document).ready()）
  • document.addEventListener("DOMContentLoader",completed)它是基于DOM2级事件中事件池监听实现事件绑定，所以可以在相同页面中给事件绑定好多不同的方法，也就是可以使用多次
  • 他监听的是DOMContentLoader 事件，这个事件是等待DOM结构一加载完就会触发执行的
  • 而window.onload 本身基于DOM0 事件绑定，而且监听的是load事件，页面中不仅只能用一次，而且需要等到浏览器所有资源加载完毕才会触发执行，触发的节点要晚于DOMContentLoader

box.onclick = function(ev){} 当事件行为处罚，浏览器会把绑定的方法执行，并且把全局下记录当前操作信息的‘事件对象’传递给这个函数 = 》 当前做了某次额操作，不管在哪一个函数中，我们获取的事件对象是同一个，存储的是当前操作的信息，和函数没关系； 事件对象

  • 鼠标事件对象 mouseEvent clientX/clientY(鼠标出发点距离当前屏幕窗口左上角x/y轴坐标) pageX/pageY(鼠标出发点距离body，页面首屏左上角x/y轴坐标) path传播路径(存储的是冒泡阶段需要传播的路径(值是捕获阶段获取的)) srcElement/target事件源 type事件类型
  • 键盘事件对象 keyboardEvent keyCode/which 键盘按键码 事件源 path type
  • 常规事件对象 Event
  • 手指事件对象 TouchEvent

ev.preventDefault/ev.returnValue = false; 阻止事件的默认行为 ev.stopPropagation/ev.cancleBubble = true 阻止冒泡传播

事件的传播机制

  • 事件是具备传播机制的

  • 先捕获 => 目标 => 冒泡 当我们触发当前元素的某个事件行为的时候：1 首先会从最外层window开始，一层层的按照结构向里层查找 （捕获：为冒泡阶段提供传播路径） 2.找到当前的事件源，触发当前事件源的相关行为 => 目标阶段 3不仅当前事件源的相关行为被触发，其所有祖先元素的相关事件行为都会被触发（在这个过程中，哪一个元素的事件行为绑定了方法，方法都会被触发执行，而且顺序是由里层向外层冒泡触发） => 冒泡

    1. 捕获
    2. 目标
    3. 冒泡 DOM0绑定方法，只能在目标阶段和冒泡阶段触发执行 DOM2绑定方法，我们可以控制在捕获阶段执行， false代表在冒泡阶段执行方法，true代表在捕获阶段执行方法 大部分时间行为默认都会存在冒泡传播机制，但是少部分时间天生自己就阻止了冒泡传播

mouseover|mouseout 和mouseenter|mouseleave

  • mouseover|mouseout over鼠标悬浮在盒子上面，out 鼠标从盒子上离开 存在冒泡传播机制
  • mouseenter|mouseleave enter就是进入盒子，leave就是离开盒子，不存在冒泡传播机制
  • 盒子中有后代元素的，我们尽可能使用mouseenter，需要基于冒泡传播干啥只能用mouseover
avatar
文章
阅读
粉丝