blocks|key|1355871|text|不是的。addEventListener是DOM的特性，而不是JS。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1355872|entityMap^0|4|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

No. <code>addEventListener</code> is a feature of the DOM, not JS.

blocks|key|1140852|text|我想你会发现在普通的JavaScript中，只有DOM对象可以有事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1140853|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I think you'll find that in plain JavaScript, it's only DOM objects that can have events.

blocks|key|1355994|text|不，不能达到可以向任何对象添加事件处理程序的程度。但是，如果您正在为其他脚本编写某种API或库，那么您可以为对象编写自己的事件系统。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1355995|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

No, not to the extent that you can add an event handler to any object. You could write your own event system for objects though, if you're writing some sort of API or library for other scripts to interact with.

blocks|key|1356064|text|不是直接添加，而是向其中任何一个添加所需的publish/subscribe基础设施。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1356065|entityMap^0|L|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Not directly but you add the required <code>publish/subscribe</code> infrastructure to any one of them.

blocks|key|1141120|text|不是的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1141121|但是，您可以通过编写addEventListener和其他函数并存储每个事件的处理程序列表来实现自己的实现。|offset|length|style|CODE|1141122|例如：(未测试)|1141123|function+addEventListener(name,+handler)+{
++++if+(!this.events)+this.events+=+{};
++++if+(!this.events[name])+this.events[name]+=+[];
++++this.events[name].push(handler);
}

function+removeEventListener(name,+handler)+{
++++if+(!this.events)+return;
++++if+(!this.events[name])+return;
++++for+(var+i+=+this.events[name].length+-+1;+i+>=+0;+i--)
++++++++if+(this.events[name][i]+==+handler)
++++++++++++this.events[name].splice(i,+1);
}

function+raiseEvent(name,+args)+{
++++if+(!this.events)+return;
++++if+(!this.events[name])+return;
++++for+(var+i+=+0;+i+<+this.events[name].length;+i%2B%2B)
++++++++this.events[name][i].apply(this,+args);
}


var+obj+=+...;
obj.addEventListener+=+addEventListener;
obj.removeEventListener+=+removeEventListener;
obj.raiseEvent+=+raiseEvent;|code-block|syntax|javascript|1141124|entityMap^0|0|A|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

No.

However, you could make your own implementation by writing <code>addEventListener</code> and other functions and storing a list of handlers for each event.

For example: (Untested)

<pre><code>function addEventListener(name, handler) {
 if (!this.events) this.events = {};
 if (!this.events[name]) this.events[name] = [];
 this.events[name].push(handler);
}

function removeEventListener(name, handler) {
 if (!this.events) return;
 if (!this.events[name]) return;
 for (var i = this.events[name].length - 1; i &gt;= 0; i--)
 if (this.events[name][i] == handler)
 this.events[name].splice(i, 1);
}

function raiseEvent(name, args) {
 if (!this.events) return;
 if (!this.events[name]) return;
 for (var i = 0; i &lt; this.events[name].length; i++)
 this.events[name][i].apply(this, args);
}


var obj = ...;
obj.addEventListener = addEventListener;
obj.removeEventListener = removeEventListener;
obj.raiseEvent = raiseEvent;
</code></pre>

blocks|key|1356282|text|您可以定义一个addEventListener方法来收集所有侦听器对象，并且您的代码可以随时调用它们。这只是面向对象的编程。定义addXListener，将作为参数传递的对象添加到某个地方，当发生某些事情时，您可以调用它的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1356283|是。|1356284|但请记住，UI事件是由HTML/Javascript定义的事件，因此您要编写的内容将仅供您的"obj“对象警告您的事件。|1356285|举个例子：|1356286|FunnyProcessor
%2B+addStartListener(...)
%2B+addProcessingListener(...)
%2B+addEndListener(...)
%2B+doStuff()|code-block|syntax|javascript|1356287|doSuff将首先调用开始侦听器，然后执行一些循环，对于每次迭代调用处理侦听器，并在结束时调用结束侦听器。|1356288|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You can define an addEventListener method to collect all the listener objects, and your code can call them anytime. It's just OO programming. Define the addXListener, add the object passed as parameter somewhere, and when something happens you call it's methods.

Yes.

But remember that UI events are those defined by HTML/Javascript so what you'd be programming will be only for your "obj" object to alert about YOUR events.

By example:

<pre><code>FunnyProcessor
+ addStartListener(...)
+ addProcessingListener(...)
+ addEndListener(...)
+ doStuff()
</code></pre>

and doSuff will call first the start listeners, next do some loop and for each iteration call processing listeners, and at the end call end listeners.

blocks|key|1141239|text|为此，您必须实现自己的功能，但这并不是很难。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1141240|var+obj+=+{
++++events:+{},
++++addEventListener:+function(eventName,+handler)+{
++++++++if(!(eventName+in+this.events))
++++++++++++this.events[eventName]+=+[];

++++++++this.events[eventName].push(handler);
++++},

++++raiseEvent:+function(eventName,+args)+{
++++++++var+currentEvents+=+this.events[eventName];
++++++++if(!currentEvents)+return;

++++++++for(var+i+=+0;+i+<+currentEvents.length;+i%2B%2B)+{
+++++++++++if(typeof+currentEvents[i]+==+'function')+{
++++++++++++++currentEvents[i](args);
+++++++++++}
++++++++}
++++},

++++click:+function()+{
++++++++//+custom+'click'+function.+when+this+is+called,+you+do+whatever+you
++++++++//+want+'click'+to+do.+and+then+raise+the+event:

++++++++this.raiseEvent('onClick');
++++}
};|code-block|syntax|javascript|1141241|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You'll have to implement your own functionality for that, but that's not very hard.

<pre><code>var obj = {
 events: {},
 addEventListener: function(eventName, handler) {
 if(!(eventName in this.events))
 this.events[eventName] = [];

 this.events[eventName].push(handler);
 },

 raiseEvent: function(eventName, args) {
 var currentEvents = this.events[eventName];
 if(!currentEvents) return;

 for(var i = 0; i &lt; currentEvents.length; i++) {
 if(typeof currentEvents[i] == 'function') {
 currentEvents[i](args);
 }
 }
 },

 click: function() {
 // custom 'click' function. when this is called, you do whatever you
 // want 'click' to do. and then raise the event:

 this.raiseEvent('onClick');
 }
};
</code></pre>

blocks|key|1356388|text|到最近为止，这实际上是可能的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1356389|然而，它并没有令人惊叹的浏览器支持。请参阅此图的"EventTarget()构造函数“部分：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#Browser_compatibility|offset|length|1356390|或者看看这个只包含相关行的图：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/EventTarget#Browser_compatibility|1356391|在这两种情况下，您需要做的就是让类扩展EventTarget，并确保在构造函数中调用super()。在此之后，您可以像在DOM对象上那样调度和侦听事件。|style|CODE|1356392|示例代码：|1356393|class+EventDispatcher+extends+EventTarget+{
++++constructor()+{
++++++++super();
++++}

++++dispatch_event()+{
++++++++this.dispatchEvent(new+Event("important-notification"));
++++}
}

const+event_dispatcher+=+new+EventDispatcher();

event_dispatcher.addEventListener("important-notification",+function()+{
++++console.log("Something+important+happened!");
});

event_dispatcher.dispatch_event();|code-block|syntax|javascript|1356394|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#Browser_compatibility|1|https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/EventTarget#Browser_compatibility^0|0|1A|2A|0|0|F|2M|1|0|16|7|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|H|3|I|5|6|7|1B|8|@$D|1C|E|1D|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

As of recent, this is actually possible! 

It doesn't have amazing browser support however. See "EventTarget() constructor" part of this graph: <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#Browser_compatibility" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#Browser_compatibility</a>

Or look at this graph which only contains the relevant row: <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/EventTarget#Browser_compatibility" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/EventTarget#Browser_compatibility</a>

In either case, all you need to do is have your class extend EventTarget, and ensure that you call <code>super()</code> in the constructor. After that's done, you can dispatch and listen for events like on DOM objects. 

Sample code:

<pre><code>class EventDispatcher extends EventTarget {
 constructor() {
 super();
 }

 dispatch_event() {
 this.dispatchEvent(new Event("important-notification"));
 }
}

const event_dispatcher = new EventDispatcher();

event_dispatcher.addEventListener("important-notification", function() {
 console.log("Something important happened!");
});

event_dispatcher.dispatch_event();
</code></pre>

Can plain Javascript objects have event attached to them? Say something like this:

<pre><code>obj = new Object();
obj.addEventListener('doSomething', foo, true);
</code></pre>

I know i can do this with jQuery, but is it possible without any library?

Can plain Javascript objects have events?

jQuery

普通的Javascript对象可以附加事件吗？像这样说：obj = new Object();obj.addEventListener('doSomething', foo, true);我知道我可以用jQuery做到这一点，但是没有任何库也可以做到吗？

问普通的Javascript对象可以有事件吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问普通的Javascript对象可以有事件吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问普通的Javascript对象可以有事件吗？
EN