`
huanyq2008
  • 浏览: 171715 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript 的事件冒泡 demo

JavaScriptASPXHTMLCSSHTML 
阅读更多

转载：

如果你还不理解JavaScript的事件冒泡往下看：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="developer" content="Realazy" />
<title>Bubble in JavaScript DOM</title>
<style type="text/css" media="screen">
 div * {display:block; margin:4px; padding:4px; border:1px solid white;}
 textarea {width:20em; height:2em;}
</style>
<script type="text/javascript">
    //<![CDATA[
    function init(){
  var log = document.getElementsByTagName('textarea')[0];
  var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
  for (var i = 0, n = all.length; i < n; ++i){
   all[i].onmouseover = function(e){
    this.style.border = '1px solid red';

    log.value = '鼠标现在进入的是： ' + this.nodeName;
   };
   all[i].onmouseout = function(e){
    this.style.border = '1px solid white';
   };
  }

  var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
  for (var i = 0, n = all2.length; i < n; ++i){
   all2[i].onmouseover = function(e){
    this.style.border = '1px solid red';

    if (e) //停止事件冒泡
     e.stopPropagation();
    else
     window.event.cancelBubble = true;
    
    log.value = '鼠标现在进入的是： ' + this.nodeName;
   };
   all2[i].onmouseout = function(e){
    this.style.border = '1px solid white';
   };
  }
 }
 window.onload = init;
    //]]>
</script>
</head>
<body>
<h1>Bubble in JavaScript DOM</h1>
<p>DOM树的结构是：</p>
<pre><code>
UL
  - LI
     - A
   - SPAN
</code></pre>
<div>
 <ul>
  <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
  <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
 </ul>
</div>
<textarea></textarea>
<p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。</p>
<div>
 <ul>
  <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
  <li><a href="#"><span>Bubbllllllllllllllle</span></a></li>
 </ul>
</div>
<p>如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。</p>
</body>
</html>

 原文地址：http://www.blueidea.com/tech/web/2007/4628.asp

分享到：
| java文件上传本篇文章来源于：开发学院 htt ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js事件代理demo

    然而，在JavaScript中，事件代理通常使用事件冒泡而非事件捕拿，因为大部分浏览器默认支持冒泡，且它更适合大多数应用场景。 3. **事件代理的优势**： - **内存优化**：只需为父元素添加一个事件监听器，而不是为...

    兼容各大浏览器的JavaScript阻止事件冒泡代码

    文中提供的JavaScript代码是一个简单的demo，演示了如何编写兼容多种浏览器的阻止事件冒泡的代码。 ```javascript function stopEvent(event){ // 阻止冒泡事件 // 取消事件冒泡 var e = arguments.callee....

    javascript宝典 光盘中DEMO源码

    DEMO源码可能会演示如何使用addEventListener、removeEventListener以及处理事件冒泡和事件捕获。 7. **AJAX**：异步JavaScript和XML（AJAX）是实现网页无刷新更新的关键技术。DEMO可能包含XMLHttpRequest对象的...

    JQ 事件冒泡

    本文将深入探讨"JQ事件冒泡"这一关键概念，结合具体的代码示例（见demo文件）来帮助理解。 事件冒泡是事件处理的一个重要机制，它源于事件在DOM树中的传播方式。当一个事件（如点击）在某个元素上触发时，该事件...

    选项卡事件委托demo

    事件委托基于JavaScript的事件冒泡机制，允许我们不在每个子元素上单独绑定事件处理器，而是将事件监听器添加到父元素上。这样，当子元素触发事件时，事件会向上冒泡到父元素，父元素的事件处理器可以检查事件源，...

    JQuery事件Demo

    **jQuery事件Demo详解** 在Web开发中，JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程，提供了丰富的API和方法来处理DOM（文档对象模型）中的事件。本篇文章将深入探讨jQuery...

    观察者模式Vs事件委托Demo

    **事件委托** 是一种在JavaScript中广泛使用的机制，用于高效地处理大量事件。与每个元素都绑定事件监听器不同，事件委托将监听器放在共享的父元素上，然后通过事件冒泡机制来捕获子元素的事件。这降低了内存消耗，...

    微信小程序事件demo

    在这个“微信小程序事件demo”中，我们将会深入探讨微信小程序中的事件处理机制，以及如何通过代码实现交互功能。 在微信小程序中，事件（Event）是用户与界面进行交互的关键桥梁。它涵盖了点击、滑动等各种用户...

    Demo.rar_DEMO_javascript 拖动

    标题 "Demo.rar_DEMO_javascript 拖动" 暗示了这是一个关于JavaScript实现的交互式表格功能的示例，特别关注于行和列的拖动以及自动排序。在这个项目中，用户可以通过点击表头来对数据进行排序，同时也能通过拖动列...

    Jsdemo-master_javascript_

    它基于事件冒泡和数据绑定原理，当用户在某一级选择时，下一级的数据会根据选择结果动态更新。这需要熟练掌握DOM操作和事件处理，可能还会用到数据结构（如JSON）来存储联动数据。 6. **前端页面模板**： 前端页面...

    jss.rar_DEMO

    **JavaScript事件详解与示例DEMO** 在JavaScript中，事件是用户或浏览器与网页交互时发生的特定情况。这些交互可以是点击按钮、滚动页面、填写表单等。事件驱动编程是JavaScript的核心特性之一，它使得网页能响应...

    jquery.hotkeys键盘事件处理插件DEMo

    《jQuery.hotkeys键盘事件处理插件DEMO深度解析》 jQuery.hotkeys是一个强大的插件，专为处理键盘事件而设计，使得开发者可以轻松地监听并响应用户按下特定按键的组合。这个插件由John Resig创建，是jQuery库的一个...

    javascript demo 基本技巧

    // 取消事件冒泡 window.event.returnValue = false; // 事件返回false值 } } ``` 你可以为需要阻止默认行为的元素添加事件监听器，如`onkeydown="return stopDefaultKey(event)"`。 3. **JavaScript静态...

    30个jquery经典Demo

    30. **事件冒泡与阻止默认行为（Event Bubbling and Default Prevention）**：`.preventDefault()`阻止事件默认行为，`.stopPropagation()`阻止事件向上冒泡。 这些示例覆盖了jQuery的核心功能和常用技巧，学习并...

    js代码-javascript 权威指南demo

    学习事件监听、事件冒泡、事件委托等概念，以及如何通过DOM API来查找、修改和添加HTML元素。 7. **模块化**：随着代码规模的增加，模块化成为必要的组织方式。CommonJS、ES6模块（import/export）以及第三方库如...

    JSDemo.rar

    5. **事件处理**：理解事件监听和事件冒泡，以及常见事件如click、mouseover、keydown等的使用。 6. **AJAX与Fetch API**：学习如何进行异步请求，获取服务器数据，并更新页面内容。 7. **Promise和async/await**...

    js实现的打地鼠游戏demo

    1. 事件监听：JavaScript的addEventListener()方法用于添加事件监听器，例如监听鼠标点击事件、页面加载事件等。 2. 事件冒泡与阻止：理解事件冒泡机制，防止点击地鼠时触发其他不必要的事件。必要时，可以使用...

    JS在线工具箱demo

    【JS在线工具箱demo】是一个基于JavaScript技术实现的网页应用，旨在提供一种便捷的在线工具箱，用户可以像在客户端应用程序中那样拖动元素并绘制流程图。这个工具箱的特色在于其交互性和灵活性，使得用户能够在网页...

    js demo

    事件监听器、事件冒泡和事件委托是理解JavaScript事件处理的关键概念。 6. **DOM操作** - Document Object Model（DOM）是HTML和XML文档的编程接口。JavaScript可以使用DOM API来查找、修改、添加和删除页面元素，...

Magicbox
Global site tag (gtag.js) - Google Analytics