Javascript事件流详解

1.事件流

描述的是从文档页面接受事件的顺序。

冒泡事件流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。

捕获事件流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

2.事件处理程序

(1)HTML事件处理程序

(2)DOM0级事件处理程序

较为传统的方式:把一个函数值赋值给一个事件处理程序的属性。这种方法用的比较多,主要是因为它简单而且支持跨浏览器;

(3)DOM2级事件处理程序

DOM2级的事件定义了两个方法:用于处理指定和删除事件处理程序的操作。分别是addEventListener()和removeEventListener()两个方法,接收三个参 数:要处理的事件名(无‘on’),作为事件处理程序的函数,布尔值(冒泡还是捕获)

DOM0、DOM2级都可以给一个元素添加多个事件和多个事件处理程序,其中多个事件处理程序按照添加顺序执行。

(4)IE事件处理程序

分别是添加事件attachEvent()和删除事件detachEvent(),接收两个参数:事件处理程序的名称(有‘on’)和事件处理程序的函数;

支持IE事件处理程序的浏览器有:IE和Opera

不使用第三个参数的原因是:IE8及更早的浏览器版本只支持事件冒泡。

  (5)跨浏览器事件处理程序

恰当的使用能力检测,有什么样的能力你就用什么样的能力

3.事件对象

在触发DOM上的某个事件时,都会产生一个事件对象event。只有在事件处理程序执行期间,event对象才会存在;一旦事件处理程序执行完成,event对象就会被销毁。

(1).DOM中的事件对象(兼容DOM的浏览器会将一个event对象传入到事件处理程序中)

①、type属性:用于获取事件类型;

②、target属性:用于获取事件目标;

③、stopPropagation()方法:用于阻止事件冒泡;

④、preventDefault()方法:阻止事件的默认行为;

(2).IE中的事件对象

①、type属性:用于获取事件类型;

②、srcElement属性:用于获取事件的目标;

③、cancelBubble属性:用于阻止事件冒泡;

④、returnValue属性:用于阻止事件的默认行为;

时间: 2024-08-29 06:42:40

Javascript事件流详解的相关文章

【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)--转

前言 javascript事件基础 事件捕获/冒泡 事件对象 事件模拟 移动端响应速度 PC与移动端鼠标事件差异 touch与click响应速度问题 结论 zepto事件机制 注册/注销事件 zepto模拟tap事件 tap事件的问题一览 点透问题 fastclick思想提升点击响应 实现原理 鬼点击 ios与android鼠标事件差异 事件捕获解决鬼点击 结语 前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜

JavaScript 事件委托详解

基本概念 事件委托,通俗地来讲,就是把一个元素响应事件(click.keydown......)的函数委托到另一个元素: 一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数. 举个例子,比如一个宿舍的同学同时快递到了,一种方法就是他们都傻傻地一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一一分发

JavaScript 运行机制详解

JavaScript 运行机制详解——转载: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另

【学习笔记】HTML5视频的属性、方法、事件介绍 详解

规划了一下学习路线 HTML5 -> CSS3  -> JS ->综合 7.31日开始,做好笔记做好记录 认真学习. HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement)所以音频文件和视频文件大多数都是一样的,除了标签名称 <video> <audio> HTML视频 大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含

[转]JavaScript异步机制详解

原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------------------------- 学习JavaScript的时候了解到JavaScript是单线程的,刚开始很疑惑,单线程怎么处理网络请求.文件读写等耗时操作呢?效率岂不是会很低?随着对这方面内容的了解和深入,知道了其中的奥秘.本篇文章就主要讲解一下JavaScript怎么处理异步问题. 一.同

JavaScript(2)---DOM详解

JavaScript(2)---DOM详解 一.DOM概念 什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方法.它的主要作用包括: 改变HTML 元素 , 改变HTML属性 , 改变CSS 样式,对页面中的所有事件做出反应. 1.DOM 节点树 概念 DOM模型将整个HTML文档看成一个树形结构,并用document对象表示该文档,树的每个子节点表示HTM档中的不同内容. 如图 上图对应的html代码如下

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

代码示例:一些简单技巧优化JavaScript编译器工作详解,让你写出高性能运行的更快JavaScript代码

告诉你一些简单的技巧来优化JavaScript编译器工作,从而让你的JavaScript代码运行的更快.尤其是在你游戏中发现帧率下降或是当垃圾回收器有大量的工作要完成的时候. 单一同态: 当你定义了一个两个参数的函数,编译器会接受你的定义,如果函数参数的类型.个数或者返回值的类型改变编译器的工作会变得艰难.通常情况下,单一同态的数据结构和个数相同的参数会让你的程序会更好的工作. function example(a, b) { // 期望a,b都为数值类型 console.log(++a * +

Javascript 严格模式详解

Javascript 严格模式详解 作者: 阮一峰 日期: 2013年1月14日 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度