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. 当进行make命令学习是出现error trying to exec 'cc1': execvp: No such file or directory

    进行编译的时候总是会出现这种状况 error trying to exec 'cc1': execvp: No such file or directory 自己把程序改了又改,改的很简单之后还是出现 ...

  2. 《Lua程序设计》第6章 深入函数 学习笔记

    在Lua中,函数是一种“第一类值(First-Class Value)”,它们具有特定的词法域(Lexical Scoping).“词法域”:函数可以潜逃在另一个函数中,内部的函数可以访问外部函数中的 ...

  3. IOS设计模式第八篇之键值观察模式

    版权声明:原创作品,谢绝转载!否则将追究法律责任. 键值观察模式: 在KVO,一个对象可以要求被通知当他的某个特殊的属性被改变了.自己或者另一个对象.如果你感兴趣你可以阅读更多的信息参考: Apple ...

  4. python基础---->python的使用(五)

    这里记录一些python的一些基础知识,主要内容是高阶函数的使用.或许我的心包有一层硬壳,能破壳而入的东西是极其有限的.所以我才不能对人一往情深. python中的高阶函数 一.map().reduc ...

  5. 【WEB前端系列之CSS】CSS3动画之Animation

    前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...

  6. 跨域 - jsonp轻松搞定跨域请求

    1.jsonp轻松搞定跨域请求 vue中使用axios,遇到跨域我就蒙逼了.第一次真正意义上的尝试使用jsonp js中用 var myscript = document.createElement( ...

  7. 【VI】如何删除匹配指定字符串的行（已解决）

    命令: g/pattern/d 如,删除包含字母 hell 的行 g/hell/d 删除 不 匹配指定字符的行(未验证,有需要的朋友可以试一下) v/pattern/d g!/pattern/d

  8. windows下php使用protobuf

    1.下载protobufc https://github.com/google/protobuf/releases/download/v3.5.0/protoc-3.5.0-win32.zip解压后放 ...

  9. LeetCode 79 Word Search（单词查找）

    题目链接:https://leetcode.com/problems/word-search/#/description 给出一个二维字符表,并给出一个String类型的单词,查找该单词是否出现在该二 ...

  10. GitStack系统RCE漏洞学习

    漏洞简介 漏洞简情 漏洞程序 GitStack 影响版本 <=2.3.10 漏洞类型 RCE 漏洞评价 高危 漏洞编号 CVE-2018-5955 漏洞程序介绍 GitStack是一款基于Pyt ...