DOM0级事件处理和DOM2级事件处理

转自: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事件流

时间: 2024-10-29 03:12:08

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

IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别

一:在布局中直接添加事件处理 <div id="div1" onclick="fOne();"></div> <script> var oDiv1 = document.getElementById("div1"); function fOne(){ alert(this===window);//true } </script> 弹出true,是因为在布局中调用的时候省略了window,全面的应该是

JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

1.HTML事件处理程序 某个元素支持的某种事件,可以通过一个与相应事件处理程序同名的HTML特性指定.这个特性的值应该是能够执行的JS代码.例如:按钮单击是要执行一些js代码,可以像下面: <input type="button" value="click me" onclick="showMessage()" /> 在js中就可以像下面一样处理: <script> function showMessage(){ ale

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

博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/24/js%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e7%a8%8b%e5%ba%8f%e8%af%a6%e8%a7%a3%ef%bc%8chtml%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e7%a8%8b%e5%ba%8f%ef%bc%8cdom0%e7%ba%a7%e4%ba%8b%e4%bb%b6%e5%a4%84

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

事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直到顶层元素(注:高级浏览器的顶层元素是window,ie8以下的浏览器顶层元素是document)  DOM2级事件绑定方式   高级浏览器绑定方式: 元素.addEventListener(type, handler, boolean);             //绑定 type 事件类型字符串

Dom0级事件和Dom2级事件

1.Dom0级事件: 注册obj.onclick=function () {}; (1.使用简单,2.跨浏览器): 删除obj.onclick=null; 2.Dom2级事件(比0级优点:多个处理函数不会被覆盖): 成员 -> addEventListener注册事件   removeEventListener移出事件: 三个参数 -> 1事件名(都不能带on),2处理函数,3布尔值涉及嵌套元素的事件触发顺序(true按捕获流的顺序调用,false按事件冒泡流的顺序调用): (IE下用atta

DOM2级事件addEventListener

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

DOM0、DOM2级事件

JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1')">第一项</span> 在js中绑定例如://<span onclick="alert('2')">第一项</span> var Ospan=document.getElementsByTagName('span')[0];Ospan

DOM0级事件处理、DOM2级事件处理

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 &l

【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行(也就是this引用当前元素): 1 var btn = document.getElementById('myBtn'); 2 btn.onclick = function(){ 3 alert(this.id); 4 }; DOM2级事件处理程序: 通过addEventListener()方法和