在Javascript中修改事件对象

时间:2012-01-21 11:11:32

标签: javascript events

在Javascript中,常见的理解是你不应该修改你不拥有的对象。我理解并同意这些论点。尽管如此,我正在考虑在Event对象中添加几个属性。首先,我将写一些背景以及其含义,之后我希望能得到一些智能反馈,包括专家和骗子。

我编写了一个事件管理器,它有addEvent,removeEvent等方法。当事件被触发时,我将调用处理程序,将事件对象传递给eventlisteners注册时传入的事件处理程序。

在传递事件对象之前,我将向event-object添加几个属性。例如; “hotKey” - 可能的值,例如“shift-c”,“alt-d”或“meta-a”。 (最后一个对应于Window上的“ctrl-a”和MacOS上的“cmd + a”等。换句话说,根据操作系统,它将正确匹配,处理程序逻辑模式不需要关心它是否在它是哪个操作系统或什么元关键字

这意味着处理程序代码变得更小,这要归功于所有需要的“if-then”语句都已由事件管理器执行,例如当触发与键相关的事件时。事件处理程序几乎需要有一个switch语句并做有趣的事情。

除了hotKey属性之外,我还计划添加一些其他属性,主要是为了简化事件处理函数,从而消除事件处理程序常用的逻辑。为了避免命名colissions,我可能会在sub-ojbect中添加新属性。换句话说,属性不需要是顶级属性。

我现在正在实施这一点,但我希望得到我可能没想过的见解。

ADDITION

问题是其他人对以下实施的看法。这要求传递给处理程序的事件对象需要修改。我问这个问题,因为我实际上正在修改一个我不拥有的对象......但在这种情况下,这样做有好处。

addEvent( document, "keyup", function(event) {
    switch (event.hotKey) {
        case 'meta-c':
            // code here
            break;
        case 'meta-a':
            // code here
            break;
    }
});

2 个答案:

答案 0 :(得分:1)

您解决方案的缺点是您将用户与event.hotKey的实施联系起来。如果另一个库添加了它自己的event.hotKey实现,它与你的实现完全不同,那么尝试使用它们的用户将会遇到一些难以调试的问题。

您应该单独提供功能,而不是更改事件对象本身:

function MyEvent(event) {
  var myEvent = clone(event);
  myEvent.hotKey = ...
  return myEvent;
}

addEvent( document, "keyup", function(event) {
    switch (MyEvent(event).hotKey) {
        case 'meta-c':
            // code here
            break;
        case 'meta-a':
            // code here
            break;
    }
});

如果你不喜欢处理程序必须包装事件的事实,那么你可以改变监听功能:

function myAddEvent ( target, type, handler, capture, scope) {
  var myHandler = function(event){
    handler.call(scope,MyEvent(event));
  }
  addEvent(target, type, myHandler, capture);
}

*这只是一个草案解决方案,你仍然需要考虑unlistening和其他方面

答案 1 :(得分:1)

你好哈坎,你也在这里:)

尝试创建自己的event object,然后使用trigger()函数发送它。

示例



//Create a new jQuery.Event object without the "new" operator.
var e = jQuery.Event( "click" );
 
// trigger an artificial click event
jQuery( "body" ).trigger( e );




触发



$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );




所有示例都在这些链接上。