关于事件的那些细节知识...

原创 2017年04月05日 18:13:17

关于事件的知识汇总


DOM0级事件处理程序


var btn = document.getElementById("btn");
//添加事件
btn.onclick = function () {
alert(this.id);  //使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此,这时候的的事件处理程序是在元素的作用域中完成的,换句话说,程序中的this引用当前元素
}


//移除事件
btn.onclick = null;


优点 :原因一是简单,二是具有跨浏览器的优势。


DOM2级件处理程序


定义的两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()    removeEventListener(),他们都接受三个参数:事件处理程序名称与事件处理程序函数和一个布尔值。最后一个布尔值如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序


var btn = document.getElementById("btn");
function handler() {
alert(this.id);//与DOM0级一样,这里添加的事件处理程序是在元素的作用域中运行
}


//添加事件
btn.addEventListener("click",handler,false);

//移除事件
btn.removeEventListener("click",handler,false);


优点:可以给一个元素添加多个事件处理程序,事件处理程序会以按照添加他们的顺序执行。 缺点: IE9 ,Firefox,Safari,Chrome,和 Opera 支持 DOM2 级事件处理程序


IE事件处理程序 , IE 实现了与DOM中类似的两个方法:attachEvent(), detachEvent(),这两个方法接收相同的两个参数:事件处理程序名称与事件处理程序函数,由于IE8及更早版本只支持事件冒泡,所以事件处理程序会被添加到冒泡阶段


var btn = document.getElementById("btn");
function handler() {
alert(this === window);//事件处理程序会发生在全局作用域中,因此this等于window.
}

//添加事件
btn.attachEvent("click",handler,false);

//移除事件
btn.detachEvent("click",handler,false);


优点:可以给一个元素添加多个事件处理程序,事件处理程序不是以按照添加他们的顺序执行,而是以相反的顺序触发。


本文由web前端精髓为


版权声明:转载原创文章请注明:文章转载自:Web前端精髓 [http://blog.csdn.net/wu_xianqiang] https://blog.csdn.net/wu_xianqiang/article/details/69275216

C语言知识点及细节

1.二维数组每一个元素都返回一个指针  指针数组表示方法: &a: a:数组第0行的首地址 a[0],*(a+0),*a:数组第0行0列元素的地址 a+1,&a[1]...
  • qq_40946787
  • qq_40946787
  • 2017年11月16日 16:13
  • 30

关于游戏测试的细节

我本身对游戏测试了解甚少,下面是根据一些资料以及自己的理解整理得来的。  游戏测试也是软件测试的一部分,所以游戏测试分为游戏软件的测试和游戏本身的测试,但是游戏本身还涉及到可玩性、娱乐性、竞技性等特征...
  • caizhongda
  • caizhongda
  • 2011年03月29日 19:04
  • 1337

那些会阻碍程序员成长的细节[1]

罗马非一日建成,软件系统也不是一天能够写出来的,在经年累月的编码生活中,总会有那么些个不经意的瞬间暴露出来,而这些不经意的外在表现日积月累,犹如水滴石穿,会产生巨大的力量反作用于程序员的成长。我简单列...
  • hero272285642
  • hero272285642
  • 2018年02月24日 21:06
  • 279

C++中的各种小细节(一)

一、多行字面值的处理 当处理一个很长的字符串的时候可以换行来写,只需要在第一行的行尾加上一个反斜线符号即可。 但是注意:当另起一行的时候不要在该行首添加额外的空格符,因为这些空格符号也会写入该字符...
  • u011390632
  • u011390632
  • 2014年02月22日 17:05
  • 979

spring学习的一些细节问题

Spring框架中加载applicationContext.xml  /  beans.xml配置文件的一些细节问题。 关于(applicationContext.xml  /  beans.xml...
  • u010143291
  • u010143291
  • 2016年08月09日 17:59
  • 141

漫谈程序员系列:那些害死程序员的细节

这次,我们不谈权术,不谈潜规则,不谈技术,不谈理想,咱们就来说说那些害死程序员不偿命的工作细节……...
  • foruok
  • foruok
  • 2015年01月06日 06:39
  • 25706

[C语言学习笔记]细节部分汇总

1.如何确根据指针确定其指向的数值的长度?只有字符型的可以用strlen()-1来求,因为数组有\n结束标志。其它类型的数组不可知。 2.二维vector的写入要pushback一个临时的一维vec...
  • qazhah5464654
  • qazhah5464654
  • 2018年02月28日 14:19
  • 18

java学习细节知识点总结

1、执行顺序:静态代码块>构造代码块>构造函数 详解链接 2、java基础总结: 详解链接...
  • a45872055555
  • a45872055555
  • 2016年01月03日 17:18
  • 529

python 相关细节知识

以前学习python只是看了一些网上教程,便快速的去写。前不久买了本书看了下,打算系统的重新学习下基础知识。现将一些自己认为的一些要注意的基础知识整理一下。 (以下的python知识不涉及pyt...
  • xiaobai_ol
  • xiaobai_ol
  • 2017年02月06日 19:19
  • 187

有关树的知识点

0、二叉树可以为空树 1、n0 = n2 + 1     二叉树中满足上式,其中n0表示度为0的即叶节点的个数,n2表示度为2的节点个数 2、树转化为二叉树的步骤:     (1) 将节点的所有兄弟节...
  • qq_18071075
  • qq_18071075
  • 2017年03月08日 17:00
  • 365
收藏助手
不良信息举报
您举报文章:关于事件的那些细节知识...
举报原因:
原因补充:

(最多只允许输入30个字)