Dynamically register the multi-event handler

原创 2005年05月21日 15:30:00

Dynamically register the multi-event handler

Found something interesting in this page.
http://www.quirksmode.org/js/events_tradmod.html

It provides us the way to dynamically register more than one event handler like this:

var old = (element.onclick) ? element.onclick : function () {};
element.onclick = function () {old(); spyOnUser()};

The code snippet will get the previous handler if any and register it to the event together with the spyOnUser. However, if you want to apply this to multi-elements, you will find that it doesn't work for you. Considering the following code snippet:

//elements is the array which contains elementA and elementB and they have the following pre-defined event handler:
//elementA.onclick='alert(1)';
//elementB.onclick='alert(2)';
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  var old = (element.onclick) ? element.onclick : function () {};
  element.onclick = function () {old(); spyOnUser()};
}

It is totally wrong if you thought that the above code snippet will change the registered event hander as:
//elementA.onclick='alert(1);spyOnUser()';
//elementB.onclick='alert(2);spyOnUser()';
instead, It will reqister it as
//elementA.onclick='old();spyOnUser()';
//elementB.onclick='old();spyOnUser()';
and the internal logic of old() is the "alert(2)"(the first invocation will create old() function with alert(1) and the second one will update it to alert(2))

In order to make it work in such scenario, You should write the code as
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
eval('var old' + i + '=' + 'element.onclick;'
+ ' element.onclick = function () {old' + i + '(); spyOnUser()}');
}

I really learn a lot from this practice; please rectify me, If there is anything wrong in my code snippet and my understanding.

You may want to try this html to get more about this.

===============================Source Code=================================

<html>
<head>
<script language="Javascript">
function spyOnUser() {
    alert('spyOnUser Method');
}

function trackFormChange() {
    for (var i = 0; i<document.bodyForm.elements.length; i++) {
     var element = document.bodyForm.elements[i];
     if (element.type == "checkbox") {
             eval('var old' + i + '=' + 'element.onclick;'
                    + ' element.onclick = function () {old' + i + '(); spyOnUser()}');
     }
    }
}
</script>
</head>

<body onload="trackFormChange()">
<form id="bodyForm" name="bodyForm">
  <input type=checkbox name="testcb1" onclick="alert('Element A')">Element A<BR>
  <input type=checkbox name="testcb2" onclick="alert('Element B')">Element B<BR>
  <input type=checkbox name="testcb3" onclick="alert('Element C')">Element C<BR>
</form>

</body>

</html>

==============================================================

BIRT_event_handler_reference

  • 2016年08月29日 01:48
  • 4.19MB
  • 下载

ACE_Reactor::register_handler 调用 WSAEventSelect 系统函数, WSAEventSelect 函数自动把关联的 socket 设置为非阻塞模式。

ACE_Reactor::register_handler 调用 WSAEventSelect 系统函数, 而 WSAEventSelect 函数自动把socket事件设置为非阻塞模式。 看MSDN...
  • iw1210
  • iw1210
  • 2014年07月09日 16:28
  • 852

Event Handler Hands on lab

  • 2009年01月17日 19:07
  • 144KB
  • 下载

input_register_handler()解析

leesagacious 原创,欢迎转载!

NS2的离散事件驱动原理Scheduler, Handler, Event

http://blog.sina.com.cn/s/blog_4ded56360100b2y2.html   NS2是离散事件驱动的仿真机制,这一点文献到处都在讲但却始终没有讲到点子上。本文试图从...
  • God2469
  • God2469
  • 2012年12月01日 20:04
  • 1398

Event handler DisableEventFiring EnableEventFiring BeforeProperties AfterProperties

编写一个event handler来仅在满足某种条件的时候才允许某个动作的执行, 是非常常见的. 比如说, 你可以写一个ItemDelete handler, 来在当前用户不是站点管理员时取消掉删除动...
  • dyp330
  • dyp330
  • 2011年05月25日 15:30
  • 423

NS2的离散事件驱动原理(Scheduler, Handler, Event, Timer)

NS2是离散事件驱动的仿真机制,这一点文献到处都在讲但却始终没有讲到点子上。本文试图从几个NS2的基本类出发探究一下离散事件驱动究竟是怎么回事。       首先是Scheduler,Handler...

Uncaught TypeError: ((n.event.special[g.origType] || (intermediate value)).handle || g.handler).appl

惯例: 我是温浩然: chrome浏览器报错  Uncaught TypeError: ((n.event.special[g.origType] || (intermediate value)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dynamically register the multi-event handler
举报原因:
原因补充:

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