javascript - 工作笔记 (事件三)

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

  一,冒泡型事件

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

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

  二,捕获型事件

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

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

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

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

方法介绍:

  addEventListener方法

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

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

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

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

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

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

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

用途:

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

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

时间: 2024-10-19 23:59:40

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

javascript - 工作笔记 (事件四)

在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345   yx.bind(item, "click", function (e) {         //console.log("Div Click 1 !");         alert("Div Click 1 !");         e.stopPropagation();     }); 但是这样用起来有些

javaScript中的事件三

javaScript中的事件三 先看两种错误的写法,他们的目的都是:添加两个事件: 错误方式一: window.onload=function (){ alert('event 1'); } window.onload=function (){ alert('event 2') } 错误方式二: window.onload=function (){ var obj=document.getElementById("but"); obj.onclick=function(){ alert

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

背景: 目前所做的项目,只能使用的是原生的javascript.对于javascript的事件绑定想必大家都懂得语法: 1,在标签中使用属性调用方法:<div onclick="AAAA();"></div> 2,在javascript中对标签对象绑定数据: <div id="test"></div> var item = document.getElementById("test"); item.

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

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

JavaScript学习笔记——事件

javascript事件基础和事件绑定 一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源 引发事件的元素.(发生在谁的身上)3.事件处理程序 对事件处理的程序或是函数 (发生了什么事) 二.事件的分类 1.鼠标事件 onclick ondblclick onmousedowm onmouseup onmousemove onmouseover onmouseout 2.键盘事件 onkeyup onkeydown onkeypress 鼠

高性能javascript读书笔记(三.DOM 编程1)

第三章DOM Script DOM编程 读书笔记 访问和修改DOM元素 浏览器通常要求DOM实现和JavaScript保持相互独立. <!-- 例如IE中,被称为JScript的JavaScript实现位于库文件jscript.dll中,而DOM实现位于另一个库mshtml.dll(内 部代号Trident).这种分离技术允许其他技术和语言,如VBScript,受益于Trident所提供的DOM功能和渲染功能.Safari使用Webkit的WebCore处理DOM和渲染,具有一个分离的JavaS

JavaScript 学习笔记— —事件委托

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果 //好处 //1.提高性能 //2.新添加的元素,还会有之前的事件 //event

JavaScript 学习笔记(三)

本章学习内容: 1.数组的使用 2.类和对象细节. 3.this关键字的使用 4.构造函数,成员函数的使用 1.数组的使用   在任何的语言中,必须要有的就是数组了,有了数组,使得很多操作都变得非常的方便..JS里面也是包含着 数组的,JS里的数组和JAVA里的数组在用法上基本相同,只是自己多了些特性....下面来看一段代码... <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script lang

高性能javascript读书笔记(三.DOM 编程2)

重绘和重排版 浏览器下载完所有的HTML标记,Javascript,CSS,图片之后,它解析文件并创建两个内部数据结构 DOM树 表示页面结构渲染树 表示DOM节点如何显示 渲染树中为每个需要显示的DOM树木=节点存放至少一个节点(隐藏DOM元素在选桉树中没有对应节点)渲染树上的节点称为"框"或者"盒",符合CSS模型的定义,将页面元素看作一个具有填充,边距,边框和位置的盒.一 旦DOM树和渲染树构造完毕,浏览器就可以显示(绘制)页面上的元素了. 当DOM改变影响到