Hi,
I've just gotten round to testing this and it seems that if I try
removeEventListener with a standard Function declaration (e.g. not just an
anonymous function) that the event is not removed.
My code is for example...
var st = {
// Event management
events: {
/**
* The add method allows us to assign a function to execute when an event of a
specified type occurs on a specific element
*
* @param element { Element/Node } the element that will have the event
listener attached
* @param eventType { String } the event type, e.g. 'click' that will trigger
the event handler
* @param callback { Function } the function that will execute as the event
handler
* @return __add { Function } this immediately invoked function expression
returns a bridge function which calls the private implementation
*/
add: (function() {
var __add,
eventType;
if (document.addEventListener) {
// Rewrite add method to use W3C event listener
__add = function(element, eventType, callback) {
eventType = eventType.toLowerCase();
element.addEventListener(eventType, function(e) {
// Execute callback function, passing it a standardized version of the event
object
callback(__standardizer.events.standardize(e));
}, false);
};
}
else if (document.attachEvent) {
// Rewrite add method to use Internet Explorer event listener
__add = function(element, eventType, callback) {
eventType = eventType.toLowerCase();
element.attachEvent("on" + eventType, function() {
// IE uses window.event to store the current event's properties
callback(__standardizer.events.standardize(window.event));
});
};
}
return function(element, eventType, callback) {
__add(element, eventType, callback);
};
}()),
/**
* The remove method allows us to remove previously assigned code from an event
*
* @param element { Element/Node } the element that will have the event
listener detached
* @param eventType { String } the event type, e.g. 'click' that triggered the
event handler
* @param callback { Function } the function that was to be executed as the
event handler
* @return __remove { Function } this immediately invoked function expression
returns a bridge function which calls the private implementation
*/
remove: (function() {
var __remove,
eventType;
if (document.removeEventListener) {
// Rewrite remove method to use W3C event listener
__remove = function(element, eventType, callback) {
eventType = eventType.toLowerCase();
element.removeEventListener(element, eventType, callback);
};
}
else if (document.detachEvent) {
// Rewrite remove method to use Internet Explorer event listener
__remove = function(element, eventType, callback) {
eventType = eventType.toLowerCase();
element.detachEvent("on" + eventType, callback);
};
}
return function(element, eventType, callback) {
__remove(element, eventType, callback);
};
}()),
}
};
I can then invoke this via the webkit inspector console using...
function time() { console.log('Time is: ' + new Date()); }
st.events.add(document.body, 'click', time);
...which works fine. But then when I *attempt* to remove it using...
st.events.remove(document.body, 'click', time);
...it doesn't work. Any ideas?
I'm not using an anonymous function in these examples so the explanation given
previously for that doesn't appear to hold true.
--
Mark McDonnell
On Thursday, 24 March 2011 at 02:09, RobG wrote:
>
>
> On Mar 24, 1:43 am, Poetro <[email protected]> wrote:
> > jQuery adds a wrapper around callback functions, and also collects
> > them to data object.
>
> It also adds a non-standard property so it can identify the element
> that it added the listener to (which in IE means also adding an HTML
> attribute). Adding non-standard properties to host objects is
> considered a bad idea, though HTML5 provides a mechanism with data-
> properties and attributes.
>
> Because of IE's inability to differentiate between DOM properties and
> HTML attributes, adding a property also adds an attribute. jQuery
> removes these extra attributes when its html() function is used, but
> they remain in the element's inner/outHTML properties.
>
>
> --
> Rob
>
> --
> To view archived discussions from the original JSMentors Mailman list:
> http://www.mail-archive.com/[email protected]/
>
> To search via a non-Google archive, visit here:
> http://www.mail-archive.com/[email protected]/
>
> To unsubscribe from this group, send email to
> [email protected]
>
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
