javascript事件冒泡简单示例


Posted in Javascript onJune 20, 2016

本文实例讲述了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="https://3water.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
    <li>
     <a href="https://3water.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
   </ul>
  </div>
  <textarea>
  </textarea>
  <p>
   鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(
   <code>
    mouseover
   </code>)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。
  </p>
  <div>
   <ul>
    <li>
     <a href="https://3water.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
    <li>
     <a href="https://3water.com/#"><span>Bubbllllllllllllllle</span></a>
    </li>
   </ul>
  </div>
  <p>
   如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。
  </p>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
flexible.js实现移动端rem适配方案
Apr 07 Javascript
JS实现的打字机效果完整实例
Jun 20 #Javascript
jQuery实现的网格线绘制方法
Jun 20 #Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 #Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 #Javascript
Javascript中的arguments对象
Jun 20 #Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 #Javascript
BootStrap selectpicker
Jun 20 #Javascript
You might like
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
thinkPHP查询方式小结
2016/01/09 PHP
php实现的生成排列算法示例
2019/07/25 PHP
Jquery事件的连接使用示例
2013/06/18 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
年终自我鉴定
2013/10/09 职场文书
银行会计财务工作个人的自我评价
2013/10/29 职场文书
中药专业自荐信范文
2014/03/18 职场文书
目标责任书范文
2014/04/14 职场文书
领导班子对照检查材料
2014/09/22 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis