document.addEventListener与$（document）.on

问题描述：

我以某种方式发现添加eventlisteners到文档有点奇怪的行为。虽然将侦听器添加到HTMLElements可以很好地将侦听器添加到文档不起作用。但奇怪的是，使用jQuery使它工作。

所以有人可以解释，为什么这两个功能没有做完全相同的事情？

["customEvent1", "customEvent2"].forEach(
    (event: string) => { 
     document.addEventListener(event,() => this.eventHandler()); 
    }); 

$(document).on("customEvent1 customEvent2",() => this.eventHandler());

编辑：那么它煤层，有对环境的一些误解。

的功能是由一类
我使用打字稿/ ES6
的事件处理程序所包围是一个类方法
定制事件触发与$(document).trigger("customEvent1");

一个是jQuery的（_less code_）等为核心JavaScript。 – Tushar

你是什么意思'[...]添加一个监听器到文档不起作用''。我这[jsfiddle]（https://jsfiddle.net/mx6get1r/），你可以看到它的工作。 –

@BhojendraNepal这是一个愚蠢的？ – epascarello

答

如果使用$(document).trigger("customEvent2");的jQuery不会创建一个本地事件（jquery src/event/trigger.js ），它只模仿本地事件处理。

因此，如果您使用document.addEventListener注册事件处理程序，那么对于这些事件您不能使用$(document).trigger(。

但是，如果你创建和调度使用本机代码的事件：

var event = new Event('customEvent1'); 
document.dispatchEvent(event);

然后你就可以用这两个document.addEventListener抓住它和jQuery的.on

答

据我所知你的箭头功能是错误的。你可以这样做，因为(event: string)的描述在这里是错误的。而且因为() => eventHandler()有点多余，你可以通过handler。

function eventHandler() { 
 
    console.log("custom event"); 
 
} 
 

 
["customEvent1", "customEvent2"].forEach(
 
    event => document.addEventListener(event, eventHandler) 
 
); 
 

 
var event1 = new Event('customEvent1'); 
 
document.dispatchEvent(event1); 
 

 
var event2 = new Event('customEvent2'); 
 
document.dispatchEvent(event2);

而且记住，你不能触发事件，香草JS注册，使用jQuery。 jQuery只创建event-like回调而不是真正的事件。所以你必须使用trigger。

// ok 
document.addEventListener('customEvent1', eventHandler); 
var event1 = new Event('customEvent1'); 
document.dispatchEvent(event1); 

// ok 
$(document).on("customEvent2", eventHandler); 
$(document).trigger("customEvent2"); 

// ok 
$(document).on("customEvent3", eventHandler); 
var event3 = new Event('customEvent3'); 
document.dispatchEvent(event3); 

// not okay 
document.addEventListener('customEvent4', eventHandler); 
$(document).trigger("customEvent4");

为什么低估？请解释。 – eisbehr

你可以用vanilla JS触发一个jQuery事件处理程序。看看这里https://jsfiddle.net/gx5xhhr1/2/。因此，声明“如果您使用jQuery进行注册，您只能通过jQuery触发它”不是事实。 – Anton

你说得对。有点写错了。这就是我的“不好”例子的原因。我希望我的文本现在更清楚。谢谢@Anton – eisbehr

答

问题不在于您附加事件处理程序的方式。 addEventListener和on方法都很好。但是，问题可能在forEach或lambda中，这会将this的范围更改为您不期望的内容。为了确保您引用正确的对象，改变这样的代码：

var self = this; 
["customEvent1", "customEvent2"].forEach(
    (event: string) => { 
     document.addEventListener(event,() => self.eventHandler()); 
    }); 

$(document).on("customEvent1 customEvent2",() => self.eventHandler());

的this关键字是有点棘手，因为它是上下文

我认为完全没有问题。 https://jsfiddle.net/gx5xhhr1/1/ – eisbehr

@eisbehr，在你的小提琴没有lambda ... – Anton

是的没关系，指向你。但他们在这里没用。 ;） – eisbehr

document.addEventListener与$（document）.on

相关推荐