今天复习下JS的冒泡事件，如果一个按钮被单击，那么这个按钮就是他的目标.如果已经为这个对象定义好了事件处理程序，那么这个事件就会调用事件处理程序，如果没有定义任何处理程序，或者事件处理程序的返回值为'true'(为'false'将会取消事件),那么这个事件会向这个对象的父级对象传播，进行处理，这个事件会一直在整个对象层次中冒泡，直到他被处理，或者他到达对象层次的最顶层，document对象。而捕获事件是针对非ＩＥ浏览器的
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Content-Type" CONTENT="text/html;charset=utf-8">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="outer">outer
<p id="inner">inner
<input type="button" id="btn" value="button">
</p>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var outer=document.getElementById("outer");
var inner=document.getElementById("inner");
var btn= document.getElementById("btn");
alert(outer);
alert(inner);
alert(btn);
outer.onclick=function(){
alert("click outer");
this.style.color="red";
}
inner.onclick=function(){
this.style.color="blue";
}
btn.onclick=function(){
this.style.color="yellow";
}
//-->
</SCRIPT>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JavaScript中的事件（上） </TITLE>
<META NAME="Content-Type" CONTENT="text/html;charset=utf-8">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="bgDiv" style="height: 200px;width: 200px;background-color:red; display:none;">
</div>
<input type="button" id="btn" value="button" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var bgDiv=document.getElementById("bgDiv");
var btn=document.getElementById("btn");
function stopBubble(e){
if(e&&e.stopPropagation()){
//火狐浏览器阻止冒泡事件
e.stopProgation();
}else{
//IE浏览器阻止冒泡事件
window.event.cancelBubble=true;
}
}
btn.onclick=function(e){
if(bgDiv.style.display=="none"){
alert("button按钮把bgDiv层变为显示状态");
bgDiv.style.display="block";
}else if(bgDiv.style.display!="none"){
alert("button按钮把bgDiv层变为隐藏状态");
bgDiv.style.display="none";
}
stopBubble(e);
}
document.onclick=function(e){
alert("document把bgDiv层变成隐藏状态");
bgDiv.style.display="none";
}
//-->
</SCRIPT>
</BODY>
</HTML>
分享到：
相关推荐
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡：在javascript事件传播过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止。并不是所有的...
事件冒泡、事件捕获和事件委托 在javascript里，事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制，我先来解释一下事件冒泡和事件捕获： 事件冒泡会从当前触发的事件目标一级一级往上传递，...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JavaScript中事件冒泡机制示例详析 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，...
主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料,需要的朋友可以参考下
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：...
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
想要了解什么是事件捕获与冒泡，需要先了解什么是事件。 什么是事件？ 我们知道，在前端开发中，JavaScript负责定义网页的“行为”。这里所说的“定义”，其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考，具体如下： 1、事件冒泡 在一个对象上触发某类事件，如onclick事件等，在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程； 事件捕获刚好相反，是从祖先节点到子节点的过程。 给一个...
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 <p id=inner>Click me! 上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个click...
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 1.事件冒泡 先来看一段代码： var $input = document.getElementsByTagName(input)[0]; var $...
主要介绍了JS html事件冒泡和事件捕获操作,结合完整实例形式分析了javascript事件冒泡及事件捕获相关原理与实现方法,需要的朋友可以参考下
NULL 博文链接：https://sailinglee.iteye.com/blog/740206
本文主要介绍了javascript中的事件冒泡和事件捕获，具有一定的参考价值，下面跟着小编一起来看下吧
本文实例讲述了JavaScript捕捉事件和阻止冒泡事件。分享给大家供大家参考，具体如下： 今日，项目程序出现异常，后发现跟冒泡事件有关，利用此机会探索一下利用Javascript捕获和冒泡事件。 一、要探究捕获和冒泡事件...
事件是javascript中的核心内容之一，在对事件的应用中不可避免的要涉及到一个重要的概念，那就是事件冒泡，在介绍事件冒泡之前，先介绍一下另一个重要的概念事件流： 一.什么是事件流: 文档对象模型（DOM）是一个树...