事件

事件流:

DOM0级事件流分为事件捕获和事件冒泡

 1冒泡:从内到外,从子到父

 2捕获:从父到子,从外到内

DOM2级事件流:事件捕获阶段、处于目标阶段和事件冒泡阶段。融合了DOM0

1事件捕获阶段(找):从外向内遍历DOM树 document->html->body->outer  只是找到对象,并不执行事件

2找到目标处于目标:事件触发目标第二阶段和第三阶段都是有事件处理程序发生

3.事件冒泡:从里向外

事件处理程序:

原生三种:

DOM0级:两种;

DOM2级:一种(但是DOM2级得考虑兼容性写法)

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():不能移除匿名添加的函数。

//IE添加事件:document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});

//IE删除事件:btn.detachEvent('onclick' ,function(){})

//其他浏览器添加事件:document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);

//其他浏览器删除事件:btn.removeEventListener("click", fn, false);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,134评论 1 6
  • 一、问答 1. dom对象的innerText和innerHTML有什么区别? innerHTML: 也就是从对象...
    饥人谷_罗伟恩阅读 648评论 0 2
  • 1:DOM0事件和DOM2级在事件监听使用方式上有什么区别? 浏览器端的JavaScript采用的是事件驱动的异步...
    饥人谷_bigJiao阅读 290评论 0 0
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,294评论 3 11
  • 题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? 事件处理程序我们也称之为事件侦听器(list...
    Taaaaaaaurus阅读 185评论 0 1