浏览器事件

Posted freesfu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器事件相关的知识,希望对你有一定的参考价值。

事件处理函数

绑定事件处理函数

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打印出打的顺序








以上是关于浏览器事件的主要内容,如果未能解决你的问题,请参考以下文章

如何使用事件侦听器来加载动画片段的循环

在每个用户的Rails中使用片段缓存

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法

C#常用代码片段备忘

web代码片段

从活动中调用片段事件