Return an element's particular event handler - javascript

Given an element in the Dom, is it possible to return the name of the event handler for a particular event?
For instance,if i select an element
$("#container")
Is it possible to return the 'keypress' eventhandler bound to that element?

This post may help: http://james.padolsey.com/javascript/things-you-may-not-know-about-jquery/
You can access all event handlers bound to an element (or any object) through jQuery’s event storage:
// List bound events:
console.dir( jQuery('#elem').data('events') );
// Log ALL handlers for ALL events:
jQuery.each($('#elem').data('events'), function(i, event){
jQuery.each(event, function(i, handler){
console.log( handler.toString() );
});
});
// You can see the actual functions which will occur
// on certain events; great for debugging!

You could get it using : $('#container').attr('keypress')

Technically yes, if you're using a named function (although this is kind of an odd thing to be doing in the first place...).
// create a named function
function fooHandler() {}
// bind the named function
$("#container").keypress(fooHandler);
// retrieve the bound function from the data collection
$("#container").data('events').keypress[0].handler.name; // 'fooHandler'

Related

Pragmatically test if specific event handler(function) is bound to an object's event using jQuery

I was looking for method to specifically test if a certain handler(function) was bound to specific object on a specific event.
The problem I am trying to solve is I want to bind a handler to an objects unload event but I wanted a way to test if it was already bound so I did not bind it twice.
Here is a solution that worked for me. I used this stackoverflow answer (https://stackoverflow.com/a/2518441/2512022) to create the following function to test if a object has a specific handler bound to a specific event.
This function take a Object, Event Name, and handler function name as input parameters and will return true/false if the function is bound the event on the object passed in.
function testHandler(obj, sEvent, sHandlerName)
{
var retVal = false;
// Get all events bound to object
var windowEvents = jQ._data(obj, "events");
// Get all handlers for a specific event
var handlers = windowEvents[sEvent];
jQ(handlers).each(function() {
// Using passed name to see if there is a match
if(this.handler.name === sHandlerName)
{
retVal = true;
return;
}
});
return retVal;
}
Then call the function as follows.
// Test if there is a beforeclose() handler bound to the window objects
// "beforeunload" event
testHandler(window, "beforeunload", "beforeclose");
You could even test if there is on anonymous handler attached to an event. In the call below "this" references a button, and we are testing if there is an anonymous hanlder attached to the buttons click event
testHandler(this, "click", "anonymous");

custom callback on jquery event

I am working with jquery and jstree
I have an event that triggers every time my tree changes:
$tree.jstree()
.on("changed.jstree", function(event, target) {
//manipulate data
});
It works perfect. I can access "this" (the tree), and also event and target. But, I am trying to define a custom callback. I tried something like this:
window.customCallback = (function(event, target) {
//manipulate data
//$(this).foo() manipulates the tree
//event.type to access the event type
//target.node to access the node
}(this));
So I can use:
$tree.jstree()
.on("changed.jstree", customCallback(event, target));
But it doesn't work. Could somebody help me out?
$tree.jstree().on("changed.jstree", customCallback(event, target));
What you're doing is setting the result of customCallback as callback handler.
What you want to do is set the function itself as callback handler:
var customCallback = function(event, target) {
// ...
};
$tree.jstree().on("changed.jstree", customCallback);
Notice the "missing" brackets - because brackets would invoke the function and we don't want that.
The parameters will be passed to the handler automatically.

Event reference is undefined on event listener callback passed as a method

Callback method is not being called when I attach my event to element. The method in question belongs to an object but it seems the way I am calling it the method isn't being called when the click event occurs.
var myObject = {
handledrop : function () {
//retrieved created html element
var elem = document.getElementById("required");
elem.addEventListener("click", this.deleteFavorite.bind(this), false);
},
//this method isn't being called when click event occurs
deleteFavorite: function (evt) {
console.log(evt);
}
}
What am I doing wrong? How do I pass the right context so that the correct method is called and passed the right context which is event
Couple of debug/trouble-shooting tips:
Post the html for the "required" element.
Check that the "required" element you think you're getting is valid:
var elem = document.getElementById("required");
console.log('elem:',elem);
You can also iterate its properties to ensure that function exists:
foreach(var property in elem){
console.log('property:',property);
}
For cross browser support - you might want to read this post:
addEventListener vs onclick

How to pass Event (e) and variables with event listeners?

I have an event listener like this:
div.addEventListener('mouseover',function(){bubble_info.call(data);},false);
function bubble_info(e,info){
//get e.pageX etc
//do stuff with info
}
This problem is in bubble_info the variable e holds the info of data and info is undefined
How do i make sure i can get e and info correctly?
Event Object has many useful properties and methods.
div.addEventListener('mouseover',function(event){
bubble_info(event, info);
// you can pass additional params that can be used in your handler
},false);
function bubble_info(event, info){
// you can access type of event from event object's properties
console.log(event.type);
console.log(info); // your additional parameter.
};
addEventListener Documentation
Use call only if you need to pass reference of this (current) object.
It's syntax will be ...
FunctionName.call(thisArg, arguments-list, ...);
call Documentation
Try this (you don't need the call unless you're passing a specific this reference - which you're missing in your code anyway):
div.addEventListener(
'mouseover',
function(event) {
bubble_info( event, dataYouWant );
},
false
}
For reference, a .call() should look like this: bubble_info.call( this, event, etc )

get elementId from event in jquery

function barvaInfo(event) {
$(document).ready(function(){
var nid = window.event.srcElement.id;
}
this works in IE but not in FF. Can i use jquery for this? i try with JQuery event api but then i do not know how to get ID from it.
If you're using jQuery, you'll need to assign a parameter to your event handlers, then pass the argument to your function on each event.
You may also want to call it from the context of the element that received the event.
// some mouseover event handler
$('div').mouseover( function( e ) {
barvaInfo.call( this, e )
});
function barvaInfo( event ) {
// element that originated the event
var nid = event.target.id;
// in this function, because we're using .call() to invoke it,
// "this" will reference the element that invoked the handler
}
The event object is normalized through jQuery for you and is passed into each event handler:
$('someelement').bind('click', function(event) {
var nid = this.id; // event.target.id
});
within the handler, this refers to the dom node of invocation. So this.id would address the id of the element. Alternative, the event object owns a property called target which also represent the element.
edit
As patrick dw pointed out, this will always be a reference to the node to which the event handler was bound to. event.target is exactly what it says, the element which is the actual target. See comments for an example link.

Categories

Resources