事件传播流程

什么是事件?

  事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了。

事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是web浏览器中发生的事情,比如说某个web页面加载完成,或者是用户滚动窗口或改变窗口大小。

什么是事件流:

事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)。

  

什么是事件冒泡:

   IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点,看一下以下示例:

$("div").click(function(event) {
    alert("div clicked");
}); 

$("p").click(function(event) {
    alert("p clicked");
}); 

$("span").click(function(event) {
    alert("span clicked");
});  

html代码:

<div>
    <p>hello, <span>world!</span>
</div>

如果点击world,会一次弹出三个框”span clicked“,”p clicked“,”div clicked“。因为在点击span的时候,span的click事件向上传播到p的onclick函数里,然后再向上传播到div的onclick函数里。

如果点击hello,会一次弹出两个框”p clicked“,”div clicked“。因为在点击p的时候,p的click事件向上传播到div的onclick函数里。

如果点击div,就只会一次弹出一个框”div clicked“。

那么怎么解决呢,我们来看一下

1:return false

$("div").click(function(event) {
    alert("div clicked");
}); 

$("p").click(function(event) {
    alert("div clicked");
    return false;
}); 

$("span").click(function(event) {
    alert("span clicked");
    return false;
});  

2:调用even.stopPropagation()方法

$("div").click(function(event) {
    alert("div clicked");
});
$("span").click(function(event) {
    alert("span clicked");
    event.stopPropagation();
});  

原文地址:https://www.cnblogs.com/Narkea/p/10493686.html

时间: 2024-10-30 05:31:50

事件传播流程的相关文章

Js事件传播流程

Js事件传播流程 js事件传播流程主要分三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数,然而,addEventListener还可以传入第三个参数,第三个参数默认值是false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数.   (1). 捕获阶段:事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获

JS中的事件传播流程

JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2,DOM事件流存在三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段. 事件流:事件发生时,事件在元素节点与根节点之间的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流.事件传播顺序的两种事件流模型:事件冒泡,事件捕获. 事件捕获(event capturing):事件从最不

Android4.0 input事件输入流程详解(中间层到应用层)

在Android系统中,类似于键盘按键.触摸屏等事件是由WindowManagerService服务来管理的,然后再以消息的形式来分发给应用程序进行处理.系统启动时,窗口管理服务也会启动,该服务启动过程中,会通过系统输入管理器InputManager来负责监控键盘消息.当某一个Activity激活时,会在该Service下注册一个接收消息的通道,表明可以处理具体的消息,然后当有消息时,InputManager就会分发给当前处于激活状态下的Activity进行处理. InputManager的启动

JavaScript中的事件冒泡?事件传播的解释

注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒泡仅仅是难题的一部分.它经常和事件捕获和事件传播一起被提及,并且对这三个概念有着很深的了解是学习javaScript事件必不可少的,例如,假如你想实现事件委托. 在这篇文章中,我会解释这些术语,并展示它们如何组合在一起.我还将向您展示如何对JavaScript事件流的基本了解可以让您对应用程序进行细

javascript 事件传播与事件冒泡,W3C事件模型

说实话笔者在才工作的时候就听说了什么"事件冒泡",弄了很久才弄个大概,当时理解意思是子级dom元素和父级dom元素都绑定了相同类型的事件,这时如果子级事件触发了父级也会触发,然后这就叫做"事件冒泡".然而,事情要是这么简单的话,相信笔者这时一定已经迎娶了白富美,当上了CEO.坏就坏在后来又听说一个"事件传播" ,尼玛不是"事件冒泡"吗,然后又听说了"W3C事件模型"...到了最后笔者彻底心碎了,只能乖乖的当

jQuery事件传播,事件流

一. jQuery事件传播 在DOM2级事件模型中,一旦事件被触发.事件流首先从DOM树顶部(文档节点)向下传播.直到目标节点.然后再从目标节点向上传播到DOM树顶.从上到下的过程被称为捕获阶段.从下到上的过程被称为冒泡阶段. 利用循环体结构分别为button元素及其全部父级节点注冊一个捕获型鼠标单击类事件处理函数. 代码演示样例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(

spring发布和接收定制的事件(spring事件传播)

版权声明:本文为博主原创文章,未经博主允许不得转载. 有事件,即有事件监听器. 有人问你spring监听器有哪些你看了下文即也知道了. 事件传播 ApplicationContext基于Observer模式(java.util包中有对应实现),提供了针对Bean的事件传 播功能.通过Application. publishEvent方法,我们可以将事件通知系统内所有的 ApplicationListener. 事件传播的一个典型应用是,当Bean中的操作发生异常(如数据库连接失败),则通过事件传

Javascript事件传播(冒泡机制) (摘自 博客园 萍水相逢)

今天在使用javascript弹出菜单时遇到了问题,搞了一晌终于算有点眉目了.和大家一起分享下.有什么不对的地方希望大家多多留言评论. 定义:JavaSciprt事件中有两个很重要的特性:事件冒泡 以及目标元素 . 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 目标元素: 任何一个事件的目标元素都是最开始的那个元素,并且它在我们的元素对象中以属性的形