js事件处理函数/监听函数

转载 2016年05月30日 20:46:52

当我们刚接触js的时候,我我们需要给一个鼠标绑定是一个事件的时候,通俗的说就是当鼠标发生一定动作的时候,需要去干什么..比如当click鼠标的时候需要做什么.我们或许会这样写:

1 var getObj = document.getElementById('obj'); //从html节点中找到那个对象.
2  
3        getObj.onclick = function(){ //绑定一个事件,当鼠标点击的时候,执行匿名函数里的代码.
4  
5               //do something
6  
7 }

 

这样的做法确实很好,并且所有的浏览器都支持该方法,但是久而久之,你会发现,加入要给一个对象绑定多个事件怎么办?写上很多个getObj.onclick = ...?但是这样确实不行的,如果真这样做了,前边的事件会被后面的事件覆盖,得不到想要的结果.这时候我们想到了事件监听函数.

IE的事件监听函数: attachEvent(name_event,func)

它的第一个参数是需要绑定的事件的名字,第二个是需要执行的函数句柄,现在你就可以在IE浏览器下一次绑定多个事件了,例如:

01 var click1 = function(){
02  
03                           alert("第一个事件");
04  
05 };
06  
07 var click2 = function(){
08  
09                          alert("第二个事件");
10  
11 };
12  
13 var getObj = document.getElementById('obj');
14  
15 getObj.attachEvent("onclick",click1);
16  
17 getObj.attachEvent("onclick",click2);

浏览器会先后弹出两个窗口,依次打印出两个函数的内容.这样就不会存在事件的覆盖问题了.

W3C定义的事件监听模型: addEventListener()

addEventListener(name_event,func,bCapture)

这个比IE的监听函数多了一个参数,第三个参数,这主要是因为遵循W3C模式的浏览器事件流会有两种阶段,监听阶段和捕获阶段,当参数为false时候为冒泡阶段,ture为捕获阶段.而IE缺少捕获阶段,而只有冒泡的阶段.所以为了兼容,一般第3个参数为false.再有就是W3C中的name_event没有"on"前缀.例如:"click","mousemove"...

同IE中事件监听函数类似,绑定多个事件如下:

01 var click1 = function(){
02  
03                           alert("第一个事件");
04  
05 };
06  
07 var click2 = function(){
08  
09                          alert("第二个事件");
10  
11 };
12  
13 var getObj = document.getElementById('obj');
14  
15 getObj.addEventListener("click",click1);
16  
17 getObj.addEventListener("click",click1);

效果一样,现在就可为同一个对象绑定多个事件了,但是问题又来了,我们需要跨平台处理,所以得制造一个函数兼容所有的浏览器:

1 function addEvent(obj, eventName,func){
2     if (obj.addEventListener) {
3         obj.addEventListener(eventName,func, false);
4     else if (obj.attachEvent) {
5         obj.attachEvent("on" + eventName,func);
6  
7     }
8 }

至于事件的卸载大致类似...

现在来看看前辈们怎么做的:

jQuery 之父的addEvent:   http://ejohn.org/blog/flexible-javascript-events/

Dean Edwards 的做法:  http://dean.edwards.name/weblog/2005/10/add-event/

 

转载请注明来源:集思网

js事件处理函数/监听函数

当我们刚接触js的时候,我我们需要给一个鼠标绑定是一个事件的时候,通俗的说就是当鼠标发生一定动作的时候,需要去干什么..比如当click鼠标的时候需要做什么.我们或许会这样写: ...

js事件处理函数中return的作用

这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用...

js事件处理函数中return的作用

这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事...

js事件处理函数中return的作用

JS函数中常常遇到,return ,return true,return false,究竟什么意思呢?如果与onclick搭配呢,如果onclick与return搭配呢?下面详细说明:【1 】首先说明...
  • J080624
  • J080624
  • 2017年02月24日 11:47
  • 969

好好学一遍JavaScript 笔记(九)——事件处理函数/监听函数/事件对象

欢迎技术交流。 QQ:138986722 事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码,当该文本发生改变或者事件被触发时,浏览器执行该代码并进行相应的处理操作,而响应...
  • hzw2312
  • hzw2312
  • 2012年02月17日 11:53
  • 3957

事件处理函数/监听函数/事件对象

事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码,当该文本发生改变或者事件被触发时,浏览器执行该代码并进行相应的处理操作,而响应某个事件而进行的处理过程称为事件处理。HTML文...

Unity3d事件处理函数

转自:http://unity3dhome.com/thread-788-1-1.html   Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可 ...
  • jixuguo
  • jixuguo
  • 2012年03月16日 17:11
  • 1022

QT4学习笔记 重新实现事件处理函数(Reimplementing Event Handlers)

http://hi.baidu.com/changfa1999/blog/item/a4f75a7ad06fcae82f73b3b4.html 7.1 重新实现事件处理函数(Reimplementin...

给wxPython事件处理函数传递参数

最近捣鼓Python,也就自然捣鼓上了wxPython。我曾经用过Qt和Gtk+写GUI,但几乎所有的Python书都告诉我说最好用的是wxPython,我没有尝试PyQt和PyGtk就开始研究wxP...

给事件处理函数传参数

给事件处理函数传参数今天刷百度前端学院的任务,遇到了一个问题,需要给事件处理函数传参数;我把问题抽象成下面问题...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js事件处理函数/监听函数
举报原因:
原因补充:

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