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");

來源

2016-08-25 DaSch

一個是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

來源

2016-08-25 11:35:20

據我所知你的箭頭功能是錯誤的。你可以這樣做，因爲(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");

來源

2016-08-25 11:29:49 eisbehr

爲什麼低估？請解釋。 – 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關鍵字是有點棘手，因爲它是上下文

來源

2016-08-25 11:35:08 Anton

我認爲完全沒有問題。 https://jsfiddle.net/gx5xhhr1/1/ – eisbehr

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

是的沒關係，指向你。但他們在這裏沒用。 ;） – eisbehr

document.addEventListener與$（document）.on

回答

相關問題