有关定义就不多说了,事件分两种

  一,冒泡型事件

      这是IE浏览器中事件模型的实现,顾名思义,就像水中的泡一样,自底而上,其经过的父元素都会触发对应的事件。

      即:触发元素的父元素先于触发元素触发,看demo

  二,捕获型事件

        这是Netscape 中的实现,它刚好与冒泡型相反,它从元素的顶部向下传递,最终到触发元素。

      即:触发元素先于父元素触发,看demo

在上面两个demo中,我们在触发元素和其父元素都绑定的相同的事件,然后触发p元素,可以很清楚的看明白这两种方式的区别。

w3c为了兼容两者,它会先从根节点检查到目标节点,然后再从目标节点冒泡至根节点,因此,捕获型事件,优先于冒泡型事件。

方法介绍:

  addEventListener方法

    第一个参数是事件类型名,事件类型名是没’on’开头

    第二个参数eventListener是回调处理函数

    第三个参数true为捕获型,false为冒泡型

  attachEvent方法(IE特有的方法,只支持冒泡型事件)

    第一个参数是事件类型名,要带"on"开头

   第二个参数eventListener是回调处理函数,

      注意(利用attachEvent注册的处理函数调用时,this指向不是注册事件的元素,而是window对象。麻烦)

用途:

  在冒泡型事件中,我们在一些具有相似操作的元素的父元素上绑定一个方法,然后进行统一处理,

  在捕获型事件中,我们可以为一个标签绑定一个统一的过滤方法,做过滤用,具体使用场景,自个去想了。

javascript - 工作笔记 (事件三)的更多相关文章

  1. javascript - 工作笔记 (事件四)

    在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,  JavaScript Code  12345   yx.bind(item, "click&quo ...

  2. javascript - 工作笔记 (事件绑定)

    背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAA ...

  3. javascript - 工作笔记 (事件绑定二)

    在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下:  JavaScript ...

  4. JavaScript学习笔记——事件

    javascript事件基础和事件绑定 一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源 引发事件的元素.(发生在谁的身上)3.事件处理程序 ...

  5. JavaScript学习笔记(三)this关键字

    this是Javascript的关键字,代表在函数运行时,自动生成一个内部对象,只能在函数内部使用.例如: function test() { this.x = 1; } 随着函数的使用场合不同,th ...

  6. JavaScript学习笔记(三)——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  7. JavaScript 学习笔记(三)

    本章学习内容: 1.数组的使用 2.类和对象细节. 3.this关键字的使用 4.构造函数,成员函数的使用 1.数组的使用   在任何的语言中,必须要有的就是数组了,有了数组,使得很多操作都变得非常的 ...

  8. 8. JavaScript学习笔记——事件

    8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...

  9. 史上最全的JavaScript工作笔记

    /* * JavaScript查看对象函数 */ function resultTest( obj ){ var resultTest = ''; $.each(obj,function(key,va ...

随机推荐

  1. delete、update忘加where条件误操作恢复过程演示

    update.delete没有带where条件,误操作,如何恢复呢? 我现在有一张学生表,我要把小于60更新成不及格. mysql> select * from student; +----+- ...

  2. c#局域网聊天软件的实现

    本软件是基于大学寝室局域网聊天的思路.c#源代码如下: using System; using System.Drawing; using System.Collections; using Syst ...

  3. Canvas的补充

    一.Canvas.save()作用:让后续的操作就好像在一个新图层上. 二.Canvas.restore():让之前save()产生的图层全部合并. 三.Canvas.translate():将原点( ...

  4. 在Nginx上配置ThinkPHP项目

    前段时间用Apache配合TP开发了一个小型网站,也算是我使用TP的第一次实战.我习惯使用pathinfo模式,本地运行一切正常,然而部署到服务器上时,由于对方使用的是Nginx,默认是不支持Thin ...

  5. coco2d-x中的坐标系问题

    (1)OpenGL坐标系 Cocos2D-x以OpenGL和OpenGL ES为基础,所以自然支持OpenGL坐标系.该坐标系原点在屏幕左下角,x轴向右,y轴向上. (2)屏幕坐标系 屏幕坐标系使用的 ...

  6. Ubuntu 14.04卸载安装失败的Mysql数据库,以及重新安装配置

    一.删除原来Mysql 1.删除mysql的数据文件 sudo rm /var/lib/mysql/ -R 2.删除mqsql的配置文件 sudo rm /etc/mysql/ -R 3.自动卸载my ...

  7. C语言基础07

    结构体与函数的区别: 1.函数是由相同数据类型的变量组成. 2.结构体可以有不同数据类型组合.可以包含char,int,float,数组等类型. struct 结构名称 { 数据类型 成员:   注意 ...

  8. How Node.js Multiprocess Load Balancing Works

    As of version 0.6.0 of node, load multiple process load balancing is available for node. The concept ...

  9. Rule Or WorkFlow

    The main value of a Workflow engine is that it makes it possible to customize the flows through some ...

  10. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...