Javascript'te dom öğeler içinEventListener nasıl eklenir?

Question

Java, C#, Actionscript vb. Etkinlikler Javascript'te dom içindir. Burada jQuery http://www.west-wind.com/weblog/posts/2010/May/27/NonDom-Element-Event-Binding-with-jQuery

ile yaptığım için bir örnek okudum ama jquery'ye gerek duymazsam ve eğer mekanizmayı anlamak istersem bunu nasıl yaparsınız? Burada

function PubSub() { 
    this.subs = {}; 
    this.subscribe = function(channel, sub) { 
     this.subs[channel] = this.subs[channel] || []; //create array for channel 
     this.subs[channel].push(sub); 
    }; 
    this.publish = function(channel) { 
     var args = [].slice.call(arguments, 1); //pop off channel argument 
     this.subs[channel].forEach(function(sub) { 
      sub.apply(void 0, args); //call each method listening on the channel 
     }); 
    }; 
} 

demo: ona

Answer 1

mekanizması gibi bir şey olduğunu en basit var http://jsfiddle.net/3PNtR/

Answer 2

Bunu başarmak için en az iki yolu vardır:

- Bir JQuery kullanıcı iseniz (şu anda değilim), basit JavaScript nesnesini JQuery ile sarmalayabilir, daha sonra DOM öğeleri gibi, olayları dinleyebilir. Bu yöntem zaten bir answerhere'a sahiptir. Bu yöntemin kaputun altında nasıl çalıştığından emin değilim, daha sonra araştırmayı planlıyorum ve kendiniz araştırabilirsiniz.

- VanillaJS ile, etkileşime girmek isteyen tüm nesnelerin türetileceği/oluşturulacağı, olağan bir 'sınıf' oluşturarak aynı efekti elde edebilirsiniz. Daha sonra bu sınıfın tüm örnekleri bir olayı kaydedebilir, yayınlayabilir ve yayınlayabilir. DOM API ve AngularJS'den borç alma semantikleri, bunun nasıl yapılabileceğini ve nasıl kullanılabileceğini gösteren bir örnek yazdım. Sen kullanabilir

/** 
 
* EventfulObject constructor/base. 
 
* @type EventfulObject_L7.EventfulObjectConstructor|Function 
 
*/ 
 
var EventfulObject = function() { 
 
    /** 
 
    * Map from event name to a list of subscribers. 
 
    * @type Object 
 
    */ 
 
    var event = {}; 
 
    /** 
 
    * List of all instances of the EventfulObject type. 
 
    * @type Array 
 
    */ 
 
    var instances = []; 
 
    /** 
 
    * @returns {EventfulObject_L1.EventfulObjectConstructor} An `EventfulObject`. 
 
    */ 
 
    var EventfulObjectConstructor = function() { 
 
    instances.push(this); 
 
    }; 
 
    EventfulObjectConstructor.prototype = { 
 
    /** 
 
    * Broadcasts an event of the given name. 
 
    * All instances that wish to receive a broadcast must implement the `receiveBroadcast` method, the event that is being broadcast will be passed to the implementation. 
 
    * @param {String} name Event name. 
 
    * @returns {undefined} 
 
    */ 
 
    broadcast: function(name) { 
 
     instances.forEach(function(instance) { 
 
     (instance.hasOwnProperty("receiveBroadcast") && typeof instance["receiveBroadcast"] === "function") && 
 
     instance["receiveBroadcast"](name); 
 
     }); 
 
    }, 
 
    /** 
 
    * Emits an event of the given name only to instances that are subscribed to it. 
 
    * @param {String} name Event name. 
 
    * @returns {undefined} 
 
    */ 
 
    emit: function(name) { 
 
     event.hasOwnProperty(name) && event[name].forEach(function(subscription) { 
 
     subscription.process.call(subscription.context); 
 
     }); 
 
    }, 
 
    /** 
 
    * Registers the given action as a listener to the named event. 
 
    * This method will first create an event identified by the given name if one does not exist already. 
 
    * @param {String} name Event name. 
 
    * @param {Function} action Listener. 
 
    * @returns {Function} A deregistration function for this listener. 
 
    */ 
 
    on: function(name, action) { 
 
     event.hasOwnProperty(name) || (event[name] = []); 
 
     event[name].push({ 
 
     context: this, 
 
     process: action 
 
     }); 
 

 
     var subscriptionIndex = event[name].length - 1; 
 

 
     return function() { 
 
     event[name].splice(subscriptionIndex, 1); 
 
     }; 
 
    } 
 
    }; 
 

 
    return EventfulObjectConstructor; 
 
}(); 
 

 
var Model = function(id) { 
 
    EventfulObject.call(this); 
 
    this.id = id; 
 
    this.receiveBroadcast = function(name) { 
 
    console.log("I smell another " + name + "; and I'm model " + this.id); 
 
    }; 
 
}; 
 
Model.prototype = Object.create(EventfulObject.prototype); 
 
Model.prototype.constructor = Model; 
 

 
// ---------- TEST AND USAGE (hopefully it's clear enough...) 
 
// ---------- note: I'm not testing event deregistration. 
 

 
var ob1 = new EventfulObject(); 
 
ob1.on("crap", function() { 
 
    console.log("Speaking about craps on a broadcast? - Count me out!"); 
 
}); 
 

 
var model1 = new Model(1); 
 

 
var model2 = new Model(2); 
 
model2.on("bust", function() { 
 
    console.log("I'm model2 and I'm busting!"); 
 
}); 
 

 
var ob2 = new EventfulObject(); 
 
ob2.on("bust", function() { 
 
    console.log("I'm ob2 - busted!!!"); 
 
}); 
 
ob2.receiveBroadcast = function() { 
 
    console.log("If it zips, I'll catch it. - That's me ob2."); 
 
}; 
 

 
console.log("start:BROADCAST\n---------------"); 
 
model1.broadcast("crap"); 
 
console.log("end :BROADCAST\n---------------\n-\n-\n"); 
 
console.log("start:EMIT\n---------------"); 
 
ob1.emit("bust"); 
 
console.log("end:EMIT\n---------------");

<h1>THE CODE IS IN the JavaScript pane!</h1> 
 
<h3>AND... THE SHOW IS ON YOUR CONSOLE!</h3>

o daha sağlam bir çözüm için bir üs olarak: İşte burada.