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

  一,冒泡型事件

      这是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. Memcache 在win7x64中安装配置

    Memcached从0.2.0开始,要求PHP版本大于等于5.2.0. 环境:phpstudy集成环境 目标:实现php用memcache 下载:memcache for win 64 http:// ...

  2. 编译安装mysql5.7.9

    第一步:安装一些可能会用到的依赖 yum -y install gcc-c++ ncurses-devel cmake make perl gcc autoconf automake zlib lib ...

  3. C#中使用MATLAB

    原文 http://www.cnblogs.com/sorex/archive/2012/08/01/2617469.html 闲来无聊写篇文章聊以慰藉. 本文写了Matlab的2种基本调用方式,且同 ...

  4. [Linux]shell编程基础/linux基础入门

    声明执行程序 #!/bin/bash 用来告诉系统使用/bin/bash 程序来执行该脚本.譬如python 脚本,可以这样写: #!/usr/bin/python   赋值和引用 赋值公式: 变量名 ...

  5. poj 1050 To the Max_dp求最大子矩阵和

    题意:求最大子矩阵和 利用dp[i]每次向下更新,构成竖起的单条矩阵,再按不小于零就加起来来更新,构成更大的矩阵 #include <iostream> #include<cstdi ...

  6. hdu 1242 Rescue_bfs+优先队列

    翻出以前的代码看看 题意:走迷宫,遇到敌人要花一分钟. #include<iostream> #include<queue> using namespace std; char ...

  7. 2.2.2 胸腰差和胸臀差的应用_米人NOONE_新浪博客

    2.2.2  胸腰差和胸臀差的应用_米人NOONE_新浪博客 腰差和胸臀差的应用(2009-06-16 19:24:57)转载▼标签:校园         前面已经对这两个概念作了简单的讲解.这两个概 ...

  8. hdu 5569 matrix(简单dp)

    Problem Description Given a matrix with n rows and m columns ( n+m ,) and you want to go to the numb ...

  9. KMP快速模式匹配的java实现

    假期实在无聊赖啊.把这个算法实现了一下即算是打发时间也算练练手了. KMP算法的关键是用归纳法计算失败函数.网上很详细了.下面直接给出代码. /** * * @author Vincent * */ ...

  10. 纯CSS3编写的面包屑导航收集

    整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...