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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Event Flow</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript">
function init(){
function modifiedAddEvent( obj, type, fn ) {
if(obj.addEventListener) {
// The W3C Way
obj.addEventListener( type, fn, true ); //最后一个参数设为true,则只有在事件传播的捕获阶段,指定的listener才会被调用 } else if ( obj.attachEvent ) {
//The Microsoft Way
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
return false;
}
} var counter = 0; // Grab all the unordered lists
var lists = document.getElementsByTagName('ul');
for(var i = 0 ; i < lists.length ; i++ ) { // Register an event listener for the click event
modifiedAddEvent(lists[i],'click',function() {
// Append the click order to the paragraph
var append = document.createTextNode(':' + counter++);
this.getElementsByTagName('p')[0].appendChild(append); // Change the class name to reveal the clicked elements
this.className = 'clicked';
});
} }
</script>
</head>
<body onload="init()">
<h1>Event Flow</h1> <div id="content">
<ul id="list1">
<li>
<p>List 1 </p>
<ul id="list2">
<li>
<p>List 2 </p>
<ul id="list3">
<li>
<p>List 3 </p>
</li>
</ul>
</li>
</ul>
</li>
</ul> <ul id="list4">
<p>List 4 </p>
</ul>
</div> </body> </html>

2.在chrome中运行

3.在IE8中运行

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

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

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

 #content {
width: 90%;
}
ul {
padding:10px;
margin:0; border:1px dotted black;
background-color:white;
list-style:none;
}
p {
margin: 0;
font-size:1.2em;
font-weight: bold;
} .clicked {
background: #ffcf54;
} #list1 {
height:80px;
}
#list2 {
margin-top: 10px;
height:20px;
} #list3 {
position:absolute;
top:190px;
left:150px;
} #list4 {
margin-top:10px;
height:100px;
}

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. Linux init 命令

    init命令用于切换到指定的运行级别,用法如下: [root@localhost ~]# init //关机 [root@localhost ~]# init //切换到单用户模式/救援模式 [roo ...

  2. ARM入门最好的文章

    一 首先说说arm的发展  可以用一片大好来形容,翻开各个公司的网站,招聘里面嵌入式占据了大半工程师职位.广义的嵌入式无非几种:传统的什么51.avr.pic称做嵌入式微控制器:arm是嵌入式微处理器 ...

  3. linux实现开机自启动脚本

    Linux下(以RedHat为范本)添加开机自启动脚本有两种方法,先来简单的; 一.在/etc/rc.local中添加如果不想将脚本粘来粘去,或创建链接什么的,则:step1. 先修改好脚本,使其所有 ...

  4. U盘安装centos6.4:缺少iso 9660映像

    方法: 1.下载安装的ISO文件    到www.centos.org网站下载对应的Centos 6.4安装文件.下载站点我一般选择网易镜像站点    64位下载参考链接:http://mirrors ...

  5. 【ipad神坑】ipad麦克风听不到声音怎么回事 微信QQ语音视频对方都听不到

    今天遇到了这个问题 说话听不见,但是敲击ipad,可以明显的听到击打的声音 siri也是可以听到 上网上找,大多都是说恢复设置,重启,隐私麦克风权限等解决方案 都是浪费感情 全部尝试过了,依然没有用. ...

  6. Android四大组件之BrocastReceive

  7. JavaScript 中的 Map

    很多编程语言中都有类似Map这种 键-值对 的数据结构. 可惜,JavaScript没有. 幸运的是,可以自己构建一个Map对象. 对象的定义 <script type="text/j ...

  8. 原生js(二)

    js的同步.异步和延迟 1.默认情况下,js是同步和阻塞DOM解析的.在解析DOM的过程中,当遇到script时,会暂停DOM解析,开始请求script并执行js,执行完成之后再接着解析DOM树. 2 ...

  9. Eclipse 创建和读取yaml文件

    工具和用法: 1. eclipse插件包:org.dadacoalition.yedit_1.0.20.201509041456-RELEASE.jar 用法:将此jar包复制到eclipse-jee ...

  10. LeetCode 43 Multiply Strings(字符串相乘)

    题目链接: https://leetcode.com/problems/multiply-strings/?tab=Description     求解大数相乘问题   按照上图所示,进行嵌套循环计算 ...