Use existing add/removeEventListener for elements

This makes it possible to use can-define with HTML elements so that both
property events and DOM events can be listened to and fire correctly.

The method for doing this is to call to the existing `addEventListener`
if one exists, otherwise to do the default action of calling to
eventLifecycle.addAndSetup.

Closes #145

Author: matthewp

can-define.js

@@ -83,6 +83,9 @@ module.exports = define = ns.define = function(objPrototype, defines, baseDefine
 		return data;
 	});
 
+	// Add in the base event methods
+	define.addBaseEvents(objPrototype);
+
 	// Add necessary event methods to this object.
 	for (var prop in eventsProto) {
 		Object.defineProperty(objPrototype, prop, {
@@ -280,7 +283,7 @@ make = {
 				if (newVal !== current) {
 					setData.call(this, newVal);
 
-					canEvent.dispatch.call(this, {
+					canEvent.trigger.call(this, {
 						type: prop,
 						target: this
 					}, [newVal, current]);
@@ -644,7 +647,6 @@ assign(eventsProto, {
 	_eventSetup: function() {},
 	_eventTeardown: function() {},
 	addEventListener: function(eventName, handler) {
-
 		var computedBinding = this._computed && this._computed[eventName];
 		if (computedBinding && computedBinding.compute) {
 			if (!computedBinding.count) {
@@ -656,10 +658,7 @@ assign(eventsProto, {
 
 		}
 
-		var baseAddEventListener = this.__proto__.addEventListener ||
-			eventLifecycle.addAndSetup;
-
-		return baseAddEventListener.apply(this, arguments);
+		return this._baseEvents.addEventListener.apply(this, arguments);
 	},
 
 	// ### unbind
@@ -678,8 +677,7 @@ assign(eventsProto, {
 
 		}
 
-		return eventLifecycle.removeAndTeardown.apply(this, arguments);
-
+		return this._baseEvents.removeEventListener.apply(this, arguments);
 	}
 });
 eventsProto.on = eventsProto.bind = eventsProto.addEventListener;
@@ -721,6 +719,14 @@ define.setup = function(props, sealed) {
 };
 define.replaceWith = replaceWith;
 define.eventsProto = eventsProto;
+define.addBaseEvents = function(objPrototype){
+	objPrototype._baseEvents = objPrototype.addEventListener &&
+	 	objPrototype.addEventListener !== eventsProto.addEventListener ?
+		{ addEventListener: objPrototype.addEventListener,
+			removeEventListener: objPrototype.removeEventListener } :
+		{ addEventListener: eventLifecycle.addAndSetup,
+			removeEventListener: eventLifecycle.removeAndTeardown };
+};
 define.defineConfigurableAndNotEnumerable = defineConfigurableAndNotEnumerable;
 define.make = make;
 define.getDefinitionOrMethod = getDefinitionOrMethod;

list/list.js

@@ -1056,6 +1056,7 @@ assign(DefineList.prototype, {
 
 
 // Add necessary event methods to this object.
+define.addBaseEvents(DefineList.prototype);
 for (var prop in define.eventsProto) {
 	DefineList[prop] = define.eventsProto[prop];
 	Object.defineProperty(DefineList.prototype, prop, {

map/map.js

@@ -56,7 +56,7 @@ var setProps = function(props, remove) {
         }
         else if( ("replace" in curVal) && isArray(newVal)) {
             curVal.replace(newVal);
-        }        
+        }
         else if( ("set" in curVal) && (isPlainObject(newVal) || isArray(newVal))) {
             curVal.set(newVal, remove);
         }
@@ -259,6 +259,7 @@ var DefineMap = Construct.extend("DefineMap",{
 });
 
 // Add necessary event methods to this object.
+define.addBaseEvents(DefineMap.prototype);
 for(var prop in define.eventsProto) {
     DefineMap[prop] = define.eventsProto[prop];
     Object.defineProperty(DefineMap.prototype, prop, {