第十三章,事件

1、事件捕获,未知的元素先,直到已知的元素

2、浏览器是从window开始捕获,虽然DOM2级事件规范要求从document开始

3、DOM2事件流包括三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段

4、addEventListener()基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行.

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

看下面的例子

<div id="ancestor" style="width: 200px;height: 20px;background: #ff0000">
    <p id="p" style="width: 200px;height: 20px;background: #ff0ff0"></p>
</div>

  

//js window.onload = function() {
            var div = document.getElementById(‘ancestor‘);
            var p = document.getElementById(‘p‘);
            div.addEventListener(‘click‘,function() {
                alert(‘1‘);
            },false);
            p.addEventListener(‘click‘,function() {
                alert(‘2‘);
            },true);
        }

  输出的结果是2,1

因为第一个设置false.冒泡的时候有,所以是从下到上,第二个是true,事件捕获时执行

事件捕获
当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

5、每个元素都有自己的处理程序

时间: 2024-08-23 08:31:56

第十三章,事件的相关文章

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

JavaScript高级程序设计:第十三章 事件

JavaScript与HTML之间的交互是通过事件实现的. 一.事件流 首先我们要明白事件流的概念.当我们点击一个按钮时,也点击了按钮的容器元素,甚至也点击了整个事件.事件流描述就是从页面中接收事件的顺序.在主流浏览器中有两种事件接收方式.一种是IE提出的事件冒泡流,另一种是Netscape提出的事件捕获流.顾名思义,事件冒泡流是从被点击的最小元素逐渐向上索引DOM树,而事件捕获的思想是不太具体的节点先捕捉到事件,然后事件沿DOM树逐渐向下,一直传播到事件的实际目标. 由于老版本浏览器不支持事件

第十三章 事件

事件概念 JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些的特定交互瞬间.可以使用侦听器(处理程序)来预定事件.以便事件发生时执行相应的代码. 事件流 事件流 描述的是从页面中接收事件的顺序. I 事件冒泡 IE的事件流叫做事件冒泡,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,逐级向上传播到较不具体的节点. IE9.FF.chrome.safari冒泡到window对象. <!DOCTYPE html> <html lang="en&

第十三章——事件(事件处理程序)

事件就是用户或浏览器执行的某种动作.响应某个事件的函数就是事件处理程序. DOM0级事件处理程序. 使用DOM0级方法指定的事件处理程序被认为是元素的方法.因此这时候的事件处理程序是在元素的作用域中运行的:换句话说,程序中的this引用当前元素. 可以通过this访问元素的任何属性和方法.以这种方式添加的事件处理程序会在事件的冒泡流阶段被处理. DOM2级事件处理程序 和DOM0级方法一样,这里的事件处理程序也是依附在元素的作用域中运行的.使用DOM2级事件处理程序的好处就是可以添加多个事件处理

第十三章——事件对象

在触发DOM的某个事件上,会产生一个事件对象event,这个对象包含着所有与事件相关的信息. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论指定事件处理程序使用什么方法(DOM0级,DOM2级),都会传入event对象. event对象包含着与创建它的特定事件有关的属性和方法.触发的事件类型不一样,可用的属性和方法也不一样.如下,是所有事件都有的成员: 在事件处理函数内部,this始终等于currentTarget的值,而target则只包含事件的实际目标

JavaScript高级程序设计:第十三章

第十三章 一.理解事件流 事件流描述的是从页面中接收事件的顺序. 1.事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.以下面的HTML页面为例: <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title> </head> <body> <div id="myDiv"&g

第十三章 进程、线程类的实现

                                        第十三章   进程.线程类的实现         多线程是指在一个进程内可以同时运行多个任务,每个任务由一个单独的线程来完成.线程是进程运行的基本单位,一个进程中可以同时运行多个线程.如果程序被设置为多线程方式,可以提高程序运行的效率和处理速度. 多个线程共用一个进程的资源:进程的调度.切换是在10ms的"时钟滴答"定时中断程序里进行.如果一个线程获得CPU,那么在下一个Tick到来前:是不可能被切换出去的

Gradle 1.12用户指南翻译——第二十三章. Java 插件

其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://github.com/msdx/gradledoc/tree/1.12. 直接浏览双语版的文档请访问: http://gradledoc.qiniudn.com/1.12/userguide/userguide.html. 另外,Android 手机用户可通过我写的一个程序浏览文档,带缓存功能的,兼容

《javascript高级程序设计》第十三章知识点

第十三章知识点总结 1.事件流: ①事件冒泡:事件开始时由最具体的事件接受,逐级向上传播到较为不具体的节点. ②事件捕获:不太具体的节点更早的接受事件,最具体的节点应该最后接到事件. 事件流包括三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 2.事件处理程序 3.事件对象 IE 属性 除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性: 属性 描述 cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true. fromElement 对于 mouseov

《Java从入门到精通》第十三章学习笔记

第十三章 Swing程序设计 一.Swing概述 Swing是GUI(图形用户界面Graphic User Interface)开发工具包,在AWT(抽象窗口工具 Abstract Windows Tool)的基础上使开发跨平台的Java应用程序界面成为可能.使用Swing开发的Java程序,其界面是不受本地系统平台限制的. 二.Swing常用窗体 1.JFrame框架窗体 JFrame窗体是一个容器,它是Swing程序中各个组建的载体,可以通过继承java,swing.JFrame类创建一个窗