Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: List of registered events

  1. #1
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default List of registered events

    Hi there,

    I have two questions to ask.

    1. How do I check which events are registered with a specific element.
    2. How do I check which event handler is registered with a specific event on an element.

    Basically, what I'm trying to do is allow the user to add events on an element. This part I was able to do. But now, I would like to give them an option to be able to remove events. I know that I will have to use removeEventListener and detachEvent for this. But when the user tries to remove an event, I would like to check two things:

    i) if that event is registered with this element

    ii) if it is, then check if the provided function / event handler was registered with the given event

    Please let me know if there's a better way to achieve this. Thanks so much in advance.
    __________________

    With Regards
    Pman
    http://www.pmansLab.com

  2. #2
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    (**RE-EDITED for substrings, to rename one function, and to give the optional useCapture bool for add/removeEventListeners**)

    If the event is not registered with the element and you use either removeEventListener or detachEvent then nothing happens and you do not get an error. So you don't even need to check if the event and/or event function that is associated with the element is there to begin with. To sum things up, use the removeEventListener and the detachEvent as they are without any issues. If you want to see if the event and/or event function exists within the element without removing it, that is a different question and requires a little work...

    Code:
    //specifying the event type as "onevent" or "event" does not matter. The code accepts either.
    
    function registerEvent(el, eventType, eventFunction, bool) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(bool==undefined) bool = false;
    	if(window.addEventListener) el.addEventListener(eventType, eventFunction, bool);
    	else el.attachEvent("on"+eventType, eventFunction);
    	if(!el.eventHolder) el.eventHolder = [];
    	el.eventHolder[el.eventHolder.length] = new Array(eventType, String(eventFunction));
    	}
    
    function hasEvent(el, eventType, eventFunction) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(!el.eventHolder) return false;
    	for(var i=0; i<el.eventHolder.length; i++) {
    		if(el.eventHolder[i][0]==eventType && el.eventHolder[i][1]==String(eventFunction)) return true;
    		}
    	return false;
    	}
    
    function unregisterEvent(el, eventType, eventFunction, bool) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(bool==undefined) bool = false;
    	if(!hasEvent(el, eventType, eventFunction)) return;
    	if(window.addEventListener) el.removeEventListener(eventType, eventFunction, bool);
    	else el.detachEvent("on"+eventType, eventFunction);
    	for(var i=0; i<el.eventHolder.length; i++) {
    		if(el.eventHolder[i][0]==eventType && el.eventHolder[i][1]==String(eventFunction)) {
    			el.eventHolder.splice(i, 1);
    			break;
    			}
    		}
    	}
    Example:
    Code:
    var el = document.getElementById("myElement")
    alert(hasEvent(el, "click", _1337n355));  //false
    registerEvent(el, "click", _1337n355);
    alert(hasEvent(el, "click", _1337n355));  //true
    alert(hasEvent(el, "click", _notLeetness));  //false
    alert(hasEvent(el, "mousedown", _1337n355));  //false
    unregisterEvent(el, "click", _1337n355);
    alert(hasEvent(el, "click", _1337n355));  //false
    
    function _1337n355() {alert(1337+"!"+1+"11");}
    function _notLeetness() {alert("!1337");}
    Last edited by Trinithis; 05-21-2007 at 05:08 PM. Reason: (**EDITED FOR SUBSTRINGS**)

  3. #3
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    LOL, we are so 'leet'.

    Just a quick question. How does the script handle mousedowns as you split the string by 'n' which to me seems very !1337

    maybe substrings would be better?

  4. #4
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    Code:
    //specifying the event type as "onevent" or "event" now does not matter (RG). The code accepts either.
    
    function registerEvent(el, eventType, eventFunction) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(window.addEventListener) el.addEventListener(eventType, eventFunction, false);
    	else el.attachEvent("on"+eventType, eventFunction);
    	if(!el.eventHolder) el.eventHolder = [];
    	el.eventHolder[el.eventHolder.length] = new Array(eventType, String(eventFunction));
    	}
    
    function isEventRegistered(el, eventType, eventFunction) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(!el.eventHolder) return false;
    	for(var i=0; i<el.eventHolder.length; i++) {
    		if(el.eventHolder[i][0]==eventType && el.eventHolder[i][1]==String(eventFunction)) return true;
    		}
    	return false;
    	}
    
    function unregisterEvent(el, eventType, eventFunction) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(!isEventRegistered(el, eventType, eventFunction)) return;
    	if(window.addEventListener) el.removeEventListener(eventType, eventFunction, false);
    	else el.detachEvent("on"+eventType, eventFunction);
    	for(var i=0; i<el.eventHolder.length; i++) {
    		if(el.eventHolder[i][0]==eventType && el.eventHolder[i][1]==String(eventFunction)) {
    			el.eventHolder.splice(i, 1);
    			break;
    			}
    		}
    	}

  5. #5
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just so I understood it properly, the eventHolder is an array that is storing the event type and the function. Am I right?

    Also, I haven't had a chance to try this yet. But, will the given solution work with anonymous functions?

    This is probably a novice question, but I'm not sure about it. So, here it goes. html elements doesn't have any property called eventHolder. So, when I do
    HTML Code:
    element.eventHolder = []
    this will just create that property for that element? If so, it's really interesting, cause I didn't know that we could do something like this.

    Again, thank you so much for your reply and time.

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Trinithis, those functions don't apply to all Javascript objects, so they shouldn't be on Object.prototype. Also, in IE DOM nodes aren't considered to be Javascript objects, so your script won't work.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    @ Twey: Hmm, okay, I'll change it back. Is there a way to do it though?

    @ pman: You are correct in that it creates a new property for that element even if it did not have it in the first place.

    As for anonymous functions, I can get it to add and check to see if it has one (if it has one, it has to be typed exactly the same, or I could add regexes to it to remove whitespace), but I can't get it to remove it. The solution? Don't use anyonymous event functions. If you want to use them, try making a dummy variable array that holds the would-be anyonymous event functions. That way you can reference them.
    Last edited by Trinithis; 05-21-2007 at 04:29 PM.

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    @ Twey: Hmm, okay, I'll change it back. Is there a way to do it though?
    Not the way you're trying to do it, no. In Firefox, Konqueror, Opera, and a lot of other browsers, you can extend HTMLElement to add a property to all DOM nodes, but not in IE.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    I redid some of the code so all the functions work properly with anyonymous functions. You do not have to make dummy arrays for the functions now.

    All that is required is that the you type the specific anonymous function you want to add/test/remove from the element. Firefox allows whitespace and semi-colon use to be lax when identifying the function, but Internet Explorer thinks that "function(){alert(8)}" to be different from "function ( ){alert(8); }". To be safe, type them the same. If you need it, I can make IE accept whitespace differences, but I won't bother making it accept semi-colon differences.

    Code:
    function registerEvent(el, eventType, eventFunction, bool) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(bool==undefined) bool = false;
    	if(!el.eventHolder) el.eventHolder = [];
    	el.eventHolder[el.eventHolder.length] = new Array(eventType, eventFunction);
    	if(window.addEventListener) el.addEventListener(eventType, el.eventHolder[el.eventHolder.length-1][1], bool);
    	else el.attachEvent("on"+eventType, el.eventHolder[el.eventHolder.length-1][1]);
    	}
    
    function hasEvent(el, eventType, eventFunction) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(!el.eventHolder) return false;
    	for(var i=0; i<el.eventHolder.length; i++) {
    		if(el.eventHolder[i][0]==eventType && String(el.eventHolder[i][1])==String(eventFunction)) return true;
    		}
    	return false;
    	}
    
    function unregisterEvent(el, eventType, eventFunction, bool) {
    	if(eventType.indexOf("on")==0) eventType = eventType.substring(2,eventType.length);
    	if(bool==undefined) bool = false;
    	if(!hasEvent(el, eventType, eventFunction)) return;
    	for(var i=0; i<el.eventHolder.length; i++) {
    		if(el.eventHolder[i][0]==eventType && String(el.eventHolder[i][1])==String(eventFunction)) {
    			break;
    			}
    		}
    	if(window.addEventListener) el.removeEventListener(eventType, el.eventHolder[i][1], bool);
    	else el.detachEvent("on"+eventType, el.eventHolder[i][1]);
    	el.eventHolder.splice(i, 1);
    	}
    Example:
    Code:
    var el = document.getElementById("myElement");
    
    alert(hasEvent(el, "click", function(){alert("Hello from anonymous!")}));  //false
    registerEvent(el, "click", function(){alert("Hello from anonymous!")});
    registerEvent(el, "click", function(){alert("Hello from anonymous 2!")});
    alert(hasEvent(el, "click", function(){alert("Hello from anonymous!")}));  //true
    unregisterEvent(el, "click", function(){alert("Hello from anonymous!")})
    alert(hasEvent(el, "click", function(){alert("Hello from anonymous!")}));  //false
    Last edited by Trinithis; 05-21-2007 at 06:06 PM.

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Ack no! You don't want to be trying to see if two different functions do the same thing... just match references!
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •