浏览器事件

Posted 2021-02-08 freesfu

事件处理函数

绑定事件处理函数

Element.onclick = function() {} 事件函数中的this指向元素本身
Element.addEventListener(事件类型(type), 处理函数(handle), false) IE9以下不兼容，可以绑定多个处理函数，按绑定的顺序执行，绑定事件函数中的this指向自己本身
Element.attachEvent("on"+事件类型, 处理函数(handle)) IE所独有的 指向window
话说为什么for in 遍历类数组的时候，会把他的length遍历出来

解除

• Element.removeEventListener("type", handleName, false) 以及上面的Element.addEventListener(type, handle, false)第三个参数，具体见MDN
• Element.detachEvent("on"+type, handleName)
  因为是根据handleName来解除事件的，所以匿名函数无法解除

事件处理模型

有两种：

事件冒泡

这里的冒泡指的是html结构上的从下到上(从子结构到父结构)，非视觉上包括关系(由下到上)

有些事件不能冒泡，比如焦点事件...

事件捕获

事件函数的发生顺序从结构上由父到子

取消冒泡事件

事件函数可以有一个形参(可以接收一个参数)，为事件对象(event)

阻止捕获和冒泡阶段中当前事件的进一步传播。

• W3C标准
  Event.stopPropagation()，不支持IE9以下版本

• IE独有的
  Event.cancelBubble = true

  Event.cancelBubble 属性是 Event.stopPropagation()的一个曾用名。在从事件处理程序返回之前将其值设置为true可阻止事件的传播。

阻止默认事件

比如我们要取消浏览器空白页面右键出菜单的默认事件window.oncontextmenu，在该事件函数中return false就可以阻止默认事件，a标签的默认加载样式也可以使用,行间样式限定符javascript: void(false)来解决

阻止默认时间一般有三种方法：
这个博主写的很明白：js取消默认事件行为

• 事件函数中return false
• event.preventDefault() W3C标准，IE9以下不兼容
• event.returnValue = false 兼容IE

事件源对象

• window.event 值为当前正在处理的事件对象，本来是有Micros IE引入的，不过后来基本浏览器都实现了，GeckoFirefox没有实现
• event.srcElement 老版本的IE的属性，属性值为事件源对象
• event.target 属性值为事件源对象

思考

利用事件冒泡，和事件原对象进行处理事件委托，点击任何一个li，console打印出打的顺序