JavaScript事件冒泡机制原理实例解析

这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡顺序是由内到外进行事件传播，事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。

听了简介介绍之后，您可能不理解，所以举个例子：

<html>
<head>
<title>js事件冒泡测试</title>
</head>
<body>
<div id='content' onclick='alert("content")'>
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>
</div>
</body>
</html>

点击test页签，会依次执行li的onclick、ul的onclick、div的onclick，content的onclick，从内到外执行，所以这个就是冒泡事件的简单例子

最近也遇到了这种情况，所以就去网上搜索资料，简单学习一下，就是点击一个按钮的时候，竟然触发了两次，通过排查，发现了冒泡机制导致的，解决方法是禁用事件冒泡机制

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

$(element).click(function(e){
  e.stopPropagation();//ie e.cancelBubble = true
});

当然除了冒泡机制会导致onclick被调用两次外，事件被绑定2次的情况也有可能，解决方法是解除事件，然后再绑定

$(element).unbind('click').click(function() {
    // todo
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS中绑定事件顺序（事件冒泡与事件捕获区别）

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p

  • JS阻止事件冒泡的方法详解

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/

  • JS html事件冒泡和事件捕获操作示例

    本文实例讲述了JS html事件冒泡和事件捕获操作.分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下. 1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 我一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲...... 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

  • js阻止冒泡和默认事件（默认行为）详解

    本文实例为大家分享了js阻止冒泡和默认事件方法,供大家参考,具体内容如下 阻止冒泡.冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了.下面的domo就是很好的例子. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法

    本文实例讲述了JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法.分享给大家供大家参考,具体如下: 事件的执行顺序绝对是让人头疼的问题.当父元素与子元素都绑定了多个事件,且有的绑定在冒泡阶段.有的绑定在捕获阶段时,事件的触发顺序如何?如果你只关心这个问题,请直接下滑到3. 绑定多个事件,且由用户行为触发.如果你想细致了解JavaScript中的事件发生,请慢慢阅读. 1. 原生事件的发生顺序 一般来讲,当为一个a标签添加click事件以后,点击这个标签

  • JS中事件冒泡和事件捕获介绍

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 1.冒泡事件: 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发.通俗来讲就是,就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件

  • javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内 事件冒泡:自下而上的去触发事件---由内到外 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡 一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了 下面是我尝试的例子: <!DOCTY

  • 一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场).工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(选A不行就选B呗).今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了. 先上结论:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件

  • JavaScript事件冒泡机制原理实例解析

    这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. 听了简介介绍之后,您可能不理解,所以举个例子: <html> <head>

  • Java等待唤醒机制原理实例解析

    这篇文章主要介绍了Java等待唤醒机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 线程的状态 首先了解一下什么是线程的状态,线程状态就是当线程被创建(new),并且启动(start)后,它不是一启动就进入了执行状态(run),也不是一直都处于执行状态. 这里说一下Java 的Thread类里面有一个State方法,这个方法里面涵盖了6种线程的状态,如下: public enum State { // 尚未启动的线程的线程状态.

  • Javascript 事件冒泡机制详细介绍

    Javascript 事件冒泡机制详细介绍

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 . 2.冒泡机制 什么是冒泡呢? 下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面.在上升的过程中,气泡会经过不同深度层次的水. 相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树:事件从dom 树的

  • JavaScript Image对象实现原理实例解析

    一.JavaScript Image对象 整理 Image 对象 Image 对象代表嵌入的图像. <img> 标签每出现一次,一个 Image 对象就会被创建. Image 对象属性 W3C: W3C 标准. 属性 描述 W3C align 设置或返回与内联内容的对齐方式. Yes alt 设置或返回无法显示图像时的替代文本. Yes border 设置或返回图像周围的边框. Yes complete 返回浏览器是否已完成对图像的加载. No height 设置或返回图像的高度. Yes h

  • JavaScript 事件冒泡应用实例分析

    JavaScript 事件冒泡应用实例分析

    然而,在今天一些大型的WEB交互项目中,比如大型的WebGame项目,JavaScript事件冒泡影响是值得重视的.本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项. 如果你对JavaScript事件冒泡还没有什么印象,不妨先看看我之前写的一篇博客<JavaScript事件冒泡简介及应用>.本文讲究实用,不在对JavaScript事件冒泡基础知识进行过多的阐述. 在文章开始之前,现在先看看下面这样一个需求:下面HTML假设描述的是一个WebGame项目包裹栏(玩过网游的人

  • javascript事件冒泡实例分析

    本文实例讲述了javascript事件冒泡.分享给大家供大家参考.具体分析如下: 事件冒泡:   如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发, 触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p, 在p,td,tr,table中添加事件响应 <html xmlns="http://www.w3.org/1999/xhtml"> <h

  • JavaScript事件冒泡与事件捕获实例分析

    本文实例讲述了JavaScript事件冒泡与事件捕获.分享给大家供大家参考,具体如下: 1.事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. <body onclick="alert('body')"> <div onclick="alert('div')"> <a href="" onclick=" rel="external nofollow&qu

  • JavaScript函数Call、Apply原理实例解析

    这篇文章主要介绍了JavaScript函数Call.Apply原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.方法重用 使用 call() 方法,您可以编写能够在不同对象上使用的方法. 1.函数是对象方法 在 JavaScript 中,函数是对象的方法. 如果一个函数不是 JavaScript 对象的方法,那么它就是全局对象的函数(参见前一章). 下面的例子创建了带有三个属性的对象(firstName.lastName.full

  • JavaScript中事件冒泡机制示例详析

    JavaScript中事件冒泡机制示例详析

    什么是冒泡? DOM事件流(event  flow )存在三个阶段:事件捕获阶段. 处于目标阶段. 事件冒泡阶段. 事件捕获(event  capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed  bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. dom标准事件流的触发的先后顺序为:先捕

  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q

随机推荐