【问题标题】:Access all event listeners in Javascript访问 Javascript 中的所有事件侦听器
【发布时间】:2014-01-10 09:07:49
【问题描述】:

我想做这样的事情:

function('string', function2(){})

我让用户在string 参数中写入他想要的内容,然后执行function2。 关键就在这里:string 是一个事件监听器。当用户写click时,我要调用onClick(),当用户写mouse时我要调用onMouseOver等等。

我想用case 做点什么,但我怎样才能访问所有事件侦听器?

【问题讨论】:

  • 简单的就是"on"+eventname;但是如果你想做更复杂的事情,你应该创建一个包含你希望用户使用的字符串并映射到你想要使用的字符串的映射,比如{'mouse': 'onmouseover', 'click': 'onclick'},那么它只是一个简单的查找
  • 除非您将参数传递给要调用的函数,否则您应该简单地使用.addEventListener('eventName', function2),否则将function2() 包装在匿名函数中:.addEventListener('eventName', function(){ function2(arg1,arg2); })。顺便说一句:eventTarget.addEventListener()。另外,最后,我可以问一下为什么你要这样做吗?这是一种有趣的方法,但我对它解决的问题很好奇(真的很好奇,而不是被动攻击“不要那样做!”的前奏)
  • 这与标准的addEventListener() API 有何不同?
  • 是的,我想做这样的事情:将所有字符串映射到事件。但是如何访问所有事件?是否存储在类似表单的 DOM 数组中?
  • 我想我误解了我的评论。您能否编辑您的问题以使其更清楚您的意思。也许是一些代码的具体例子?

标签: javascript dom listener dom-events


【解决方案1】:

你应该使用addEventListener

element.addEventListener("string", function() {}, false);

但是,对于 IE attachEvent,因为它不符合标准:

element.attachEvent("string", function() {});

最后,正如 kybernetikos 在他的评论中提到的那样,您可以使用简单的字典将 mouse 映射到 mouseover

如果你想触发事件,你应该使用dispatchEvent

【讨论】:

  • 如果我理解得很好,asker 想要触发事件监听器,而不是添加它们
【解决方案2】:

如果您使用旧模型(即elem.onclick = function(){ /* */ };)添加事件侦听器,则可以使用

elem['on' + event]();

请记住,这只会触发事件侦听器,但不会创建事件(例如,它不会冒泡)。

如果您不想创建一个事件,该事件会触发使用addEventlistener 添加的事件侦听器,并且会冒泡,并执行真实事件所做的所有事情,那么您必须

  1. 使用事件构造函数创建您的事件:EventCustomEvent
  2. 使用dispatchEvent 触发它

有关更多信息和示例,请参阅MDN page

【讨论】:

  • 想解释一下吗?
  • @DritjonGjimishka 您使用的是新型号还是旧型号?
  • 旧的。基本上,当用户输入字符串“click”时,如果单击了 div,我想调用事件 OnClick() 并执行 function2()。
【解决方案3】:

您可以使用 .trigger 来执行此操作。在 jsfiddle 中查看这个示例。在输入框中输入“dblclick”。

http://jsfiddle.net/jspatel/Suj4H/1/

<input id="writehere"> </input>
  $('#writehere').dblclick(function() {
     alert ('dblclick');
   });


$('#writehere').bind('keypress', function(e) {
    if(e.keyCode==13){
        $(this).trigger( $(this).val() );
    }
});

【讨论】:

    猜你喜欢
    • 2020-08-27
    • 1970-01-01
    • 2012-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-08
    相关资源
    最近更新 更多