1.两个阶段三个模型：Netscape支持事件捕获，IE支持事件冒泡，w3c是先捕获后冒泡

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>Event Flow</title>
  6.  
  7.     <link rel="stylesheet" type="text/css" href="style.css" />
  8.  
  9.     <script type="text/javascript">
  10. function init(){
  11.     function modifiedAddEvent( obj, type, fn ) {
  12.         if(obj.addEventListener) {
  13.             // The W3C Way
  14.             obj.addEventListener( type, fn, true );      //最后一个参数设为true,则只有在事件传播的捕获阶段，指定的listener才会被调用
  15.  
  16.         } else if ( obj.attachEvent ) {
  17.             //The Microsoft Way
  18.             obj['e'+type+fn] = fn;
  19.             obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  20.             obj.attachEvent( 'on'+type, obj[type+fn] );
  21.         } else {
  22.             return false;
  23.         }
  24.     }
  25.  
  26.     var counter = 0;
  27.  
  28.     // Grab all the unordered lists
  29.     var lists = document.getElementsByTagName('ul');
  30.     for(var i = 0 ; i < lists.length ; i++ ) {
  31.  
  32.         // Register an event listener for the click event
  33.         modifiedAddEvent(lists[i],'click',function() {
  34.             // Append the click order to the paragraph
  35.             var append = document.createTextNode(':' + counter++);
  36.             this.getElementsByTagName('p')[0].appendChild(append);
  37.  
  38.             // Change the class name to reveal the clicked elements
  39.             this.className = 'clicked';
  40.         });
  41.     }
  42.  
  43. }
  44.     </script>
  45. </head>
  46. <body onload="init()">
  47. <h1>Event Flow</h1>
  48.  
  49. <div id="content">
  50.     <ul id="list1">
  51.         <li>
  52.             <p>List 1 </p>
  53.             <ul id="list2">
  54.                 <li>
  55.                     <p>List 2 </p>
  56.                     <ul id="list3">
  57.                         <li>
  58.                             <p>List 3 </p>
  59.                         </li>
  60.                     </ul>
  61.                 </li>
  62.             </ul>
  63.         </li>
  64.     </ul>
  65.  
  66.     <ul id="list4">
  67.         <p>List 4 </p>
  68.     </ul>
  69. </div>
  70.  
  71. </body>
  72.  
  73. </html>

2.在chrome中运行

3.在IE8中运行

4.如果将上面的modifiedAddEvent函数中的 obj.addEventListener( type, fn, true)最后一个参数设为false,则在chrome中的结果与在IE8中的相同。

最后一个参数设为false，说明指定的listener是在冒泡阶段被调用。也就是说此时的事件模型与IE相同，所以两者结果相同。

5.把css文件附上。通过设置css,把list3放在了list4中。

  1.  #content {
  2.      width: 90%;
  3.  }
  4.  ul {
  5.      padding:10px;
  6.      margin:0;
  7.  
  8.      border:1px dotted black;
  9.      background-color:white;
  10.      list-style:none;
  11.  }
  12.  p {
  13.      margin: 0;
  14.      font-size:1.2em;
  15.      font-weight: bold;
  16.  }
  17.  
  18.  .clicked {
  19.      background: #ffcf54;
  20.  }
  21.  
  22.  #list1 {
  23.      height:80px;
  24.  }
  25.  #list2 {
  26.      margin-top: 10px;
  27.      height:20px;
  28.  }
  29.  
  30.  #list3 {
  31.      position:absolute;
  32.      top:190px;
  33.      left:150px;
  34.  }
  35.  
  36.  #list4 {
  37.      margin-top:10px;
  38.      height:100px;
  39.  }

javaScript高级教程(五) Event Flow的更多相关文章

  1. JavaScript高级教程

    JavaScript高级教程 基础总结深入 数据类型 分类 you are so nb! undefined :undefined string :任意字符串 sybmol: object:任意对象, ...

  2. javaScript高级教程(八)-----正则表达式温故知新

    1.RegExp对象:五个属性二个方法 五个属性:global, ignoreCase,multiline,lastIndex,source 二个方法: exec()--模式匹配 test()--检测 ...

  3. javascript高级教程：如何优化javascript代码性能

    在web前端开发中,为实现一些动态效果,减小页面大小,我们一般都会使用JavaScript技术来进行相关设置.但是初学者在编写JavaScript代码的时候,往往都是比较低质的代码,那如何才能提高Ja ...

  4. JavaScript高级程序设计(五)： js的关键字instanceof和typeof使用

    JavaScript中instanceof和typeof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: 一.typeof 1.含义:typeof返回一个表达式的数据类型的字符 ...

  5. 《JavaScript高级教程》学习笔记一、变量和数据类型

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...

  6. javaScript高级教程(九) ------javascript对象字面量--------困扰已久的问题

    在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外. ...

  7. javaScript高级教程(七)正则表达式中括号三种常见作用

    括号用来将子表达式标记起来,以区别于其他表达式 比如很多的命令行程序都提供帮助命令,键入 h 和键入 help 的意义是一样的,那么就会有这样的表达式: h(elp)? 字符h之后的elp可有可无这里 ...

  8. javaScript高级教程(二)Scope Chain & Closure Example

    <!DOCTYPE html> <html> <head> <meta charset=gb2312 /> <title>js</ti ...

  9. javascript 高级程序设计 五

    1.变量: ECMAScript中的基本类型都是值类型Boolean,Number,Null,Undefined和String,在这里JS和其他的语言有所不同,就是JS中的String是值类型 而不像 ...

随机推荐

  1. tts文本转语音服务

    1. 谷歌tts http://translate.google.cn/translate_tts?ie=UTF-8&tl=zh-CN&q=谷歌 2. 百度tts http://tts ...

  2. 通过java的i/o机制进行图片流的存储以及对网络图片的存储

    存储内地图片思路:首先把原有的图片以流的方式读取出来,再以流的方式存储到目标文件: package imgStream; import java.io.*; public class ImgStrea ...

  3. 《Lua程序设计》9.2 管道（pipe）与过滤器（filter） 包含使用协同函数实现“生产者——消费者”问题的实例代码

    一个关于协同程序的经典示例是“生产者-消费者”问题.这其中涉及到两个函数,一个函数不断地产生值(比如从一个文件中读取值),另一个则不断地消费这些值(比如将这些值写到另一个文件).通常,这两个函数大致是 ...

  4. PHP关于=>和->以及::的用法

    1.=>的用法 在php中数组默认键名是整数,也可以自己定义任意字符键名(最好是有实际意义),如: $css=array('style'=>'0',‘color’=>‘green‘) ...

  5. 【linux系列】centos安装vsftp

    一.检查vsftpd软件 如果发现上不了网可以修改配置文件中的ONBOOT=no改为yes,然后重启服务试试

  6. echarts - 特殊需求实现方案汇总

    五分钟上手echarts echarts中 设置x||y轴文案.提示文字等为固定字数,超出显示"..." 关于echarts下钻功能的一些总结.js echarts - 特殊需求实 ...

  7. SharpGL学习笔记(二) 模型变换(几何变换)

    (二) 模型变换 模形变换就是指的在世界坐标系中(world space)做“移动”,“旋转", "缩放"三种操作. 首先要说明的,在Opengl中,是用4x4矩阵进行坐 ...

  8. LeetCode 18 4Sum (4个数字之和等于target)

    题目链接 https://leetcode.com/problems/4sum/?tab=Description 找到数组中满足 a+b+c+d=0的所有组合,要求不重复. Basic idea is ...

  9. Linux下重启mysql的时候出现 start: Job failed to start

    mysql进程自己退出了,使用如下指令确认mysql进程不在了. ps -ef | grep mysql 看不到mysql进程 mysql进程不在,尽快回复服务的想法,就是重启服务 /etc/init ...

  10. 使用DnsCat反弹shell

    DnsCat技术特点 Dns隧道反弹shell DnsCat服务器的安装 #git clone https://github.com/iagox86/dnscat2.git #cd dnscat2 # ...