javascript addeventlistener参数 - document.addEventListener和window.addEventListener之间的区别?




js监听事件 addeventlistener第三个参数 (3)

在使用PhoneGap时,它有一些使用document.addEventListener默认JavaScript代码,但我有我自己的代码,它使用window.addEventListener

function onBodyLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("touchmove", preventBehavior, false);
    window.addEventListener('shake', shakeEventDidOccur, false);
}

有什么区别,哪个更好用?


Answers

你会发现,在JavaScript中,通常有许多不同的方法来做同样的事情或找到相同的信息。 在你的例子中,你正在寻找一些保证永远存在的元素。 windowdocument都符合法案(只有一些差异)。

mozilla开发网络

addEventListener()将单个事件侦听器注册到单个目标上。 事件目标可以是文档中的单个元素,文档本身,窗口或XMLHttpRequest。

所以只要你能指望你的“目标”永远在那里,唯一的区别就是你正在听的是什么事件,所以只要使用你最喜欢的。


documentwindow是不同的对象,它们有一些不同的事件。 在它们上使用addEventListener()可以侦听发往不同对象的事件。 你应该使用实际上有你感兴趣的事件的那个。

例如, window对象上不存在document对象上的"resize"事件。

例如, "DOMContentLoaded"事件只在document对象上。

所以基本上,您需要知道哪个对象接收您感兴趣的事件,并在该特定对象上使用.addEventListener()

以下是一个有趣的图表,显示哪种类型的对象可以创建哪种类型的事件: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_referencehttps://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference

如果您正在侦听传播的事件(如单击事件),则可以在文档对象或窗口对象上侦听该事件。 传播事件唯一的主要区别在于时机。 该事件将在window对象之前触及document对象,因为它首先出现在层次结构中,但这种差异通常并不重要,因此您可以选择其中一个。 我发现在处理传播事件时,选择最接近事件来源的事件来满足您的需求通​​常会更好。 这意味着你在任何一个工作时都可以通过window选择document 。 但是,我经常更接近源document.body并使用document.body或者甚至是文档中的一些更接近的共同父项(如果可能的话)。


lodash得到了_.mapValues() ,它与underescore的_.mapObject()相同。







javascript events dom event-listener