今天复习下JS的冒泡事件,如果一个按钮被单击,那么这个按钮就是他的目标.如果已经为这个对象定义好了事件处理程序,那么这个事件就会调用事件处理程序,如果没有定义任何处理程序,或者事件处理程序的返回值为'true'(为'false'将会取消事件),那么这个事件会向这个对象的父级对象传播,进行处理,这个事件会一直在整个对象层次中冒泡,直到他被处理,或者他到达对象层次的最顶层,document对象。而捕获事件是针对非IE浏览器的
代码:
<!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)是一个树...