javascript - 工作笔记 (事件三)
有关定义就不多说了,事件分两种
一,冒泡型事件
这是IE浏览器中事件模型的实现,顾名思义,就像水中的泡一样,自底而上,其经过的父元素都会触发对应的事件。
即:触发元素的父元素先于触发元素触发,看demo
二,捕获型事件
这是Netscape 中的实现,它刚好与冒泡型相反,它从元素的顶部向下传递,最终到触发元素。
即:触发元素先于父元素触发,看demo
在上面两个demo中,我们在触发元素和其父元素都绑定的相同的事件,然后触发p元素,可以很清楚的看明白这两种方式的区别。
w3c为了兼容两者,它会先从根节点检查到目标节点,然后再从目标节点冒泡至根节点,因此,捕获型事件,优先于冒泡型事件。
方法介绍:
addEventListener方法
第一个参数是事件类型名,事件类型名是没’on’开头
第二个参数eventListener是回调处理函数
第三个参数true为捕获型,false为冒泡型
attachEvent方法(IE特有的方法,只支持冒泡型事件)
第一个参数是事件类型名,要带"on"开头
第二个参数eventListener是回调处理函数,
注意(利用attachEvent注册的处理函数调用时,this指向不是注册事件的元素,而是window对象。麻烦)
用途:
在冒泡型事件中,我们在一些具有相似操作的元素的父元素上绑定一个方法,然后进行统一处理,
在捕获型事件中,我们可以为一个标签绑定一个统一的过滤方法,做过滤用,具体使用场景,自个去想了。
javascript - 工作笔记 (事件三)的更多相关文章
- javascript - 工作笔记 (事件四)
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345 yx.bind(item, "click&quo ...
- javascript - 工作笔记 (事件绑定)
背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAA ...
- javascript - 工作笔记 (事件绑定二)
在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下: JavaScript ...
- JavaScript学习笔记——事件
javascript事件基础和事件绑定 一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源 引发事件的元素.(发生在谁的身上)3.事件处理程序 ...
- JavaScript学习笔记(三)this关键字
this是Javascript的关键字,代表在函数运行时,自动生成一个内部对象,只能在函数内部使用.例如: function test() { this.x = 1; } 随着函数的使用场合不同,th ...
- JavaScript学习笔记(三)——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...
- JavaScript 学习笔记(三)
本章学习内容: 1.数组的使用 2.类和对象细节. 3.this关键字的使用 4.构造函数,成员函数的使用 1.数组的使用 在任何的语言中,必须要有的就是数组了,有了数组,使得很多操作都变得非常的 ...
- 8. JavaScript学习笔记——事件
8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...
- 史上最全的JavaScript工作笔记
/* * JavaScript查看对象函数 */ function resultTest( obj ){ var resultTest = ''; $.each(obj,function(key,va ...
随机推荐
- ado.net实现一个通知公告功能
一.建立相应的数据库,此处就不多说了,相信大家都非常了解
- #event.initMouseEvent
initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值.此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前 ...
- Windows消息拦截技术的应用(作者博客里有许多相关文章)
民航合肥空管中心 周毅 一.前 言 众所周知,Windows程式的运行是依靠发生的事件来驱动.换句话说,程式不断等待一个消息的发生,然后对这个消息的类型进行判断,再做适当的处理.处理完此次消息后又回到 ...
- QT多重继承的时候,要把QObject放在最前面,否则报错——C++认为人性本恶,默认都是私有的,这点和Delphi的世界观不一样
在买来的控件(没有源码)的基础上,想加入QObject的一些特性,不得不多继承: class MyProgress : public CProgress, public QObject 但总是报错: ...
- QT:程序忙碌时的进度条——开启时间循环,等结束的时候再退出
当程序在执行一项(或多项)耗时比较久的操作时,界面总要有一点东西告诉用户“程序还在运行中”,那么,一个“没有终点”的进度条就是你需要的了.PS:最好把耗时的操作扔到一个子线程中去,以免他阻塞了界面线程 ...
- LoadRunner 技巧之THML 与 URL两种录制模式分析
Loadrunner的Virtual User Generator 提供人脚本的录制功能,对于初学者来说,这大大的降低了编写脚本的门槛,loadrunner提供两种录制脚本的方式:Html_based ...
- Hbase深入学习(一) 什么是hbase
Hbase深入学习(一) 什么是hbase 一.hbase是什么? 首先hbase是一个在Hadoop的HDFS分布式存储系统上介于映射(key/value)的nosql的分布式数据库:它通 ...
- hdu 5620 KK's Steel(推理)
Problem Description Our lovely KK has a difficult mathematical problem:he has a N(1≤N≤1018) meters s ...
- Ajax请求ashx返回各类数据的常见处理方式
.请求text数据,在success事件中手动解析 前台: $.ajax({ type: "post", url: "checkFile.ashx", data ...
- 【Android Training UI】创建自定义Views(Lesson 2 - 自定义Drawing)
发布在我的网站:http://kesenhoo.github.io/blog/2013/06/30/android-training-ui-creating-custom-views-lesson-2 ...