We Keep Coding

Is it possible to get Events associated with a DOM Element in JavaScript(not jQuery)

I have one script file which will be injected to any website on the fly. I don't have access to that website code. What i want to do is when someone click on any Element of web page, the list of events associated with that element should be displayed.
In DOM 3 spec, earlier it was mentioned to add EventListenerList. But unfortunately it was removed from specification.
I have already checked Visual Event 2. But they are only able to steal events of custom libraries and DOM events with on attribute.
In jQuery 1.8+ also we can easily access events of element using
$._data(element,'events');
In chrome, we can access it using
getEventListeners(element)
If i had access to webpage then i can override prototype's addEventListener method like
HTMLElement.prototype.realAddEventListener = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function(a,b,c){
this.realAddEventListener(a,b,c);
//do whatever want
};
But this is not the case with me as i am not able to inject this code before event listener binding. Can any one help me for Vanilla JS?

you can handle your event with javascript DOM (without JQuery)
document.getElementById('my_element').onclick=function(event){
//TO DO: the behavior of your action
}
I hope my answer will be helpfull

bind('keyup') not working on content injected after the dom is loaded

I have a list of inputs and when the user enters a specific key, something happens. This works great but there is also a button to fetch content from a server (JSON) and then add it to the dom (HTML) after it has been formatted (Markup.js). The problem is that on the inputs that are injected after the dom is loaded the keyup events do not register. What is causing this problem?

Use .on() instead of .bind().
For earlier versions, the .bind() method is used for attaching an
event handler directly to elements. Handlers are attached to the
currently selected elements in the jQuery object, so those elements
must exist at the point the call to .bind() occurs.
See jQuery - how to use the "on()" method instead of "live()"? on how to use .on(), and https://stackoverflow.com/a/14354091/584192 for examples on how to migrate existing code.

You must to bind the events AFTER the injection of the inputs. Can you post you're relevant code to better answer this question?

Why is jquery's .data() method needed

In the following getElementsByTagName("p")[0] and getElementById("demo") access the same element.
Both of the following work, so I can't figure out why the jquery data function is even needed. Is the second not portable to all browsers.
$(document.getElementsByTagName("p")[0]).data("funcZ", function() {console.log("ZZZZZ")})
$(document.getElementById("demo")).data("funcZ")()
document.getElementsByTagName("p")[0].funcX = function() {console.log("XXXXX")}
document.getElementById("demo").funcX()

According the the jQuery website:
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page.
It's possible that by attaching random fields to a DOM element, when the DOM element disappears, the fields remain in memory. It looks like jQuery handles that for you.

The $.data() method is perfect for hiding data as opposed to attaching it to a data-attribute. It's easily accessed by key/value, great for storing state information when creating plugins, or really anything.

How can I force the DOM to re-eval in Javascript/jQuery?

I am dynamically appending HTML to a webpage and I'm also using jQuery to manage stuff.
When I add HTML code, jQuery ignores its existence.
For example:
$("td.elementToClick").click(...
Will work great with jQuery. But if somewhere in the code I append:
$("tr#myRowToAppend").append("<td class="elementToClick>...</td>");
jQuery will ignore this new element if I click on it.
As jQuery associates the events after the page finishes loading, I need one of two solutions:
- Force the DOM to re eval the page without changing the current layout (I don't wish a refresh, so location.reload() is out of the question).
- Force jQuery to add this new element to it's internal event manager.
I don't wish to use onclick="blabla()", I really need to use jQuery.
How can I accomplish this?

What you are looking for is jQuery live. From docs description: "Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events."
There is also a plugin liveQuery that supports a wider range of events if you want.

the live() method will alleviate most of your headaches.
I see this happening more often in IE and with cloned elements, to support IE you have to be much more careful with DOM manipulation.
I also see alot of questions on SO with people having issues of copying/moving dom elements to new parts of the dom without cloning it first, which doesn't workout so well in IE.
So you can use live or when you have to handle events from dynamically inserted DOM elements, make sure you clone them with clone(true) to specify you want the events copied:
$("body").append('<div id="one"></div>");
$("#one").mouseover(function(){});
$("body").append( $("#one").clone(true).attr('id','two') );

Handling events from HTML anchor tags in ExtJS

I have a large application built in ExtJS and am looking for the best way to handle custom events from anywhere in the application. For example I might want to put an anchor tag in some text in the application which will open a custom component in my app. At the moment I listen to clicks on the body and if the target has a css class applied to it in a certain format I use that to perform an action.
For example I might have:
<a class="ACTION-View-Customers">View Customers</a>
My event handler will pull the classname apart and do the action. The problem with this approach is that it's difficult to pass many parameters through to the handler. What I propose is to use JSON inside the anchor's class or href tags, like so:
View Customers
Can you think of any problems with this approach and suggest any alternatives? Thanks.

I personally would not use additional meta in the HTML itself, if it can be helped. I would apply specific IDs to links of specific purpose, and bind a click event to that object. I've also found the DomQuery object (needed to find and reference the anchors) interesting to work with. Since I usually use the JQuery adapter with Ext JS, I'll use JQuery's selectors to locate the specific DOM element, and JQuery's bind functions [.click(fn)], while using Ext internal to the function itself. JQuery and Ext JS make a great combo, especially with the new JQuery 1.3.1, which really speeds things up.

I suggest using HTML5's data- attributes. For example:
View Customers
var eventsource = link.getAttribute("data-event");
HTH

As you might know, HTML tag accepts ANY named attribute. So you may create some specifically called attribute(s) and pass any value(s) to them (f.e. my-bogus-param="something"), By this you can develop any sophisticated parameter passing system. Then you can parse these attributes in event handler.