转帖 javascript事件监听

原帖地址： http://www.cnblogs.com/AganCN/archive/2008/05/24/1206272.html

考虑这样的情形在IE浏览中处理，需要响应页面的按钮点击事件，有哪些方法呢？
（1）onclick属性添加事件处理函数

function DoClick()//handler of click event

{

}

</javascript>

测试1test1

（2）attachEvent方法添加事件处理函数

<body>

</body>

function attClick()//handler of click event

{

//process click event

}

test2.attachEvent("onclick",attClick);

</javascript>

测试2test2

现在问题来，如果我们同时添加这两种事件处理方式，那么他们相应的顺序是什么样的，下面来模拟一下这种情形:

<BODY>

function DoClick()//property event handler

{

alert('calling DoClick');

}

function AttClick1()//attach event handler

{

alert('calling AttClick1');

}
test31.οnclick=DoClick;
test31.attachEvent('onclick',AttClick1);

</script>

</BODY>

（code for 3.1)

<BODY>

function DoClick()//property event handler

{

alert('calling DoClick');

}

function AttClick1()//attach event handler

{

alert('calling AttClick1');

}

function AttClick2()

{

alert('calling AttClick2');

}

test32.attachEvent('onclick',AttClick1);

test32.onclick=DoClick;

</script>

</BODY>

(code for 3.2)

测试3test3.1test3.2
测试结果是：先调用属性处理函数，再调用attach事件处理函数。
attachEvent方式还用一个好处就是他能添加任意多个事件处理函数

function DoClick()

{

alert('calling DoClick');

}

function AttClick1()

{

alert('calling AttClick1');

}

function AttClick2()

{

alert('calling AttClick2');

}

test41.attachEvent('onclick',AttClick1);

test41.attachEvent('onclick',AttClick2);

</script>

attach多个事件处理函数，他们的调用顺序又是怎样的呢,测试一下就明白啦。

function DoClick()

{

alert('calling DoClick');

}

function AttClick1()

{

alert('calling AttClick1');

}

function AttClick2()

{

alert('calling AttClick2');

}

function AttClick3()

{

alert('calling AttClick3');

}

test41.attachEvent('onclick',AttClick1);

test41.attachEvent('onclick',AttClick2);

test41.attachEvent('onclick',AttClick3);

</script>

(code for 4.1)

function DoClick()

{

alert('calling DoClick');

}

function AttClick1()

{

alert('calling AttClick1');

}

function AttClick2()

{

alert('calling AttClick2');

}

function AttClick3()

{

alert('calling AttClick3');

}

test42.attachEvent('onclick',AttClick3);

test42.attachEvent('onclick',AttClick2);

test42.attachEvent('onclick',AttClick1);

</script>

(code for 4.2)

测试4test4.1test4.2
通过测试结果可以看出调用的顺序和attach的顺序无关。

待解决的问题：
attach的事件处理函数调用顺序是怎么样的？
如何查看一个事件的所有回调函数？
在调用某个事件处理函数时，如何停止调用同一个对象后继的事件处理函数？

转载于:https://www.cnblogs.com/liuling2010/archive/2010/12/23/1914704.html

转帖 javascript事件监听相关推荐

JavaScript事件监听完整实例（含注释）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
javascript事件监听与事件委托
事件监听与事件委托在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托 ...
JavaScript事件监听
一.事件event对象 Event事件对象,用来获取事件的详细信息:鼠标位置.键盘按键.在主流浏览器下默认传参给事件函数的第一个参数,ie低版本会挂载在window下的event属性里,保存了触发事件 ...
JavaScript 基础--- (正则表达式 / 事件监听与绑定)
正则表达式创建正则表达式: 方法一: var reg = /pattern/; 方法二:var reg = new RegExp('pattern'); RegExp 对象的常用方法: 示例: &l ...
JavaScript 的addEventListener() 事件监听详解！
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
JavaScript之事件触发on和事件监听addEvent及addEventListener的区别和作用
一.on事件为dom节点添加多个on事件只会执行最后的那个事件,因为最后的指定的on事件指向最后的那个函数,代码如下所示: function method1(){console.log('我是方法1 ...
JavaScript原生实现事件监听及手动触发
事件监听标签中的onxxx,比如<button οnclick="btnHandler">按钮</button> js中的onxxx,比如document ...
从jQuery的缓存到事件监听
很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery********* ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...

转帖 javascript事件监听

转帖 javascript事件监听相关推荐

最新文章

热门文章