javaScript高级教程(五) Event Flow
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的更多相关文章
- JavaScript高级教程
JavaScript高级教程 基础总结深入 数据类型 分类 you are so nb! undefined :undefined string :任意字符串 sybmol: object:任意对象, ...
- javaScript高级教程(八)-----正则表达式温故知新
1.RegExp对象:五个属性二个方法 五个属性:global, ignoreCase,multiline,lastIndex,source 二个方法: exec()--模式匹配 test()--检测 ...
- javascript高级教程:如何优化javascript代码性能
在web前端开发中,为实现一些动态效果,减小页面大小,我们一般都会使用JavaScript技术来进行相关设置.但是初学者在编写JavaScript代码的时候,往往都是比较低质的代码,那如何才能提高Ja ...
- JavaScript高级程序设计(五): js的关键字instanceof和typeof使用
JavaScript中instanceof和typeof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: 一.typeof 1.含义:typeof返回一个表达式的数据类型的字符 ...
- 《JavaScript高级教程》学习笔记一、变量和数据类型
JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript的伪语言的形式来定义的. 一.变量和数据类型 1. 变量 JavaSript是弱类型语言,可以通过var定义任何类型变 ...
- javaScript高级教程(九) ------javascript对象字面量--------困扰已久的问题
在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外. ...
- javaScript高级教程(七)正则表达式中括号三种常见作用
括号用来将子表达式标记起来,以区别于其他表达式 比如很多的命令行程序都提供帮助命令,键入 h 和键入 help 的意义是一样的,那么就会有这样的表达式: h(elp)? 字符h之后的elp可有可无这里 ...
- javaScript高级教程(二)Scope Chain & Closure Example
<!DOCTYPE html> <html> <head> <meta charset=gb2312 /> <title>js</ti ...
- javascript 高级程序设计 五
1.变量: ECMAScript中的基本类型都是值类型Boolean,Number,Null,Undefined和String,在这里JS和其他的语言有所不同,就是JS中的String是值类型 而不像 ...
随机推荐
- Unity透明Shader
Shader "Custom/Blocks" { Properties { _Color (,,,) _MainTex ("Albedo (RGB)", 2D) ...
- drawCall_01
在屏幕上渲染物体,引擎需要发出一个绘制调用来访问图形API(iOS系统中为OpenGL ES).每个绘制调用需要进行大量的工作来访问图形API,从而导致了CPU方面显著的性能开销. Unity在运 ...
- 服务器搭建--Linux安装erlang
1.安装依赖环境: 1)安装GCC GCC-C++ Openssl等模块,安装过就不需要安装了 yum -y install make gcc gcc-c++ kernel-devel m4 ncur ...
- select选择option时触发的click事件google不兼容问题
原先的方式,下面代码编写的问题在google浏览器下是触发不了click事件的,具体缘由不清楚,反正都可以概括为不兼容了 碰到问题时,百度到的一篇解决:http://blog.163.com/rihu ...
- 推荐系统之基于图的推荐:基于随机游走的PersonalRank算法
转自http://blog.csdn.net/sinat_33741547/article/details/53002524 一 基本概念 基于图的模型是推荐系统中相当重要的一种方法,以下内容的基本思 ...
- gradle-4.1-all.zip
1. https://services.gradle.org/distributions/ https://services.gradle.org/distributions/gradle-4.1-a ...
- XCode 遇到的问题
俗话说:工欲善其事必先利其器.抛弃了VS,投入XCode的怀抱.先不说两者的差距,还是先熟悉开发工具是关键.下面列出个人使用中遇到的一些问题. Problem1:修改Xcode字体颜色以及调整字体大小 ...
- CF 1100E Andrew and Taxi(二分答案)
E. Andrew and Taxi time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 如何使用HttpClient来发送带客户端证书的请求,以及如何忽略掉对服务器端证书的校验
最近要做客户端和服务器端的双向认证,在客户端向服务器端发送带证书的请求这里有一点问题,网上的例子大多都不太好使,于是找了github上httpclient源代码中的例子改造了一下,终于弄明白了 git ...
- Rails secret token bug
ArgumentError (A secret is required to generate an integrity hash for cookie session data. Use confi ...