转自:http://www.cnblogs.com/holyson/p/3914406.html

0级DOM

分为2个:一是在标签内写onclick事件

      二是在JS写onlicke=function(){}函数

1)

<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

2)

document.getElementById("myButton").onclick = function () {
alert('thanks');
}

以下是分割线


1级DOM--(为什么没有1级DOM)

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ,这个标准下的事件模型就是我们所说的2级DOM事件模型


2级DOM

只有一个:监听方法,有两个方法用来添加和移除事件处理程序:addEventListener()和removeEventListener()。

它们都有三个参数:第一个参数是事件名(如click);

         第二个参数是事件处理程序函数;

           第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用。

  • addEventListener():可以为元素添加多个事件处理程序,触发时会按照添加顺序依次调用。
  • removeEventListener():不能移除匿名添加的函数。
document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

只有2级DOM包含3个事件:事件捕获阶段、处于目标阶段和事件冒泡阶段

<span>
<a></a>
</span>

点击a后capturing(捕捉)阶段事件传播会从document-> span->a,然后发生在a,最后bubbling(冒泡)阶段事件传播会从a->span->document 。

1.事件冒泡(常用)

IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素。

2.事件捕获(少用)

Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件。

3.DOM事件流

so easy

DOM0级事件处理和DOM2级事件处理的更多相关文章

  1. JS-------DOM0级事件处理和DOM2级事件处理-------简单记法

    0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function(){}函数 1) <input id="myButton" type= ...

  2. js事件处理程序详解,html事件处理程序,dom0级事件处理程序,dom2级事件处理程序

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/24/js%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e ...

  3. 事件流程以及dom2级事件绑定

    事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...

  4. JS事件委托(事件代理,dom2级事件)

    一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...

  5. Android开发学习之事件处理和Button具体解释

    Android的事件处理机制:  1.基于监听器的事件处理 --- 组件绑定特定的事件监听器   --- 重点   2.基于回调的事件处理   --- 主要做法是重写Android组件特定的回调函数, ...

  6. javascript中DOM0,DOM2,DOM3级事件模型解析

    DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...

  7. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  8. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  9. DOM0级与DOM2级

    定义: 0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function(){}函数 1) <input id="myButton" t ...

随机推荐

  1. ionic入门01

    总述 ionic是一个强大的混合式/hybrid HTML5移动开发框架,特点是使用标准的HTML.CSS和JavaScript,开发跨平台的应用. 接下来,敝人会从0到1采用ionic构建一个简单的 ...

  2. 遇到shell重定向的一个奇怪问题:'消失'的标准输入!

    需求: 把找到的文件逐行输出,然后用rm在许可的情况下删除   前置准备:  $ls rm.sh test1 test2 test3 test4 test5 test6 $cat rm.sh #! / ...

  3. Python基础面向对象成员

    面向对象中成员 字段: 静态字段保存在类中:静态字段在代码加载时被创建 普通字段保存在对象中: 规则: 普通字段只能用对象访问: 静态字段用类去访问(万不得已的时候可以使用对象访问) #!/usr/b ...

  4. node.js自动化测试断言包assert的方法说明

    参考以下文档 http://yijiebuyi.com/blog/ca2c0edf447624bd4d527490c9fce369.html http://www.cnblogs.com/softlo ...

  5. MMORPG大型游戏设计与开发(服务器 游戏场景 动态场景与副本)

    场景的内容讲解到今天算是暂时划上一个句号了,接下来为大家讲解的是AI部分(大型AI),如果有兴趣的朋友不妨持续关注这些文章,大家一起学习和进步.动态场景和副本是场景中特殊的类型,副本在这里想必已经是无 ...

  6. openstack学习(三)创建虚拟机

    1 , 用图形管理界面创建虚拟机 #virt-manager    //打开图形管理界面 配置文件一般存放于/etc/libvirt/qemu 然后按照提示一步步安装即可,网络连接方式改为桥接 导出创 ...

  7. Java集合框架之map

    Java集合框架之map. Map的主要实现类有HashMap,LinkedHashMap,TreeMap,等等.具体可参阅API文档. 其中HashMap是无序排序. LinkedHashMap是自 ...

  8. 杂项之pymysql连接池

    杂项之pymysql连接池 本节内容 本文的诞生 连接池及单例模式 多线程提升 协程提升 后记 1.本文的诞生 由于前几天接触了pymysql,在测试数据过程中,使用普通的pymysql插入100W条 ...

  9. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  10. JavaScript中两种类型的全局对象/函数

    这里所说的JavaScript指浏览器环境中的包括宿主环境在内的. 第一种是ECMAScript Global Object,第二种是宿主环境(Host)下的全局对象/函数. 一.核心JavaScri ...