Javascript converting addEventListener to attachEvent - javascript

I have the following code calling a Javascript function in a nice shiny standards complient manner :). Please note that I must send elementsList[i] to the function (the this keyword will not be adaquate) as the event listerner is being attached to it's nephew (for want of a better term)
This rather mangled code will effectively find the control element for the dynamic behaviour of the current node in elementsList[i] and add a click event listener to it. When fired it passes the clicked node to the toggle function.
elementsList[i].previousSibling.lastChild.addEventListener
("click", (function(el){return function(){toggle(el)};})(elementsList[i]),false);
Thing is it doesn't work at all with IE8 and below, and in spite of spending most of the morning trying to find a work around I just can't get it to play ball. If someone knows how to translate this into IE crapo code, I'd be grateful to see it.

Have you tried
elementsList[i].previousSibling.lastChild.attachEvent
("onclick", (function(el){return function(){toggle(el)};})(elementsList[i]),false);

2 potential suggestions.
1.) Include jQuery in your project and use their x-browser event bindings (or mootools or some other lib)
2.) Not so-recommended, roll your own x-browser event bindings

Related

jQuery(document).on("keydown",...) works, but not document.addEventListener("keydown",...)

I thought I should see how much I really need jQuery now. So I started by replacing
jQuery(document).on("keydown.", function(e){...})
with
document.addEventListener("keydown", function(e){...})
I believed that one was easy, but to my surprise the event was no longer fired. To investigate this a bit I entered the second version in the console. Now it worked. ;-)
That is a bit impractical, of course. I would prefer that I did not have to enter it in the console...
In the code the event listener is added right after some changes to the DOM, i e some additions. I guess the trouble might be related to this, but I have no idea what to do.
Any suggestions?
EDIT: Thanks everyone for the comments. In this particular case it would be good to get rid of jQuery (but otherwise it is no problem using jQuery of course).
I should have said that some DOM elements are added long after the page is loaded so window.onload etc is not useful here.
I should maybe also have said that I am testing this in the latest version of Chrome and for this I am not interested in backward compatibility (it is too complicated anyway in this case so I have just dropped that... ;-) ).
UPDATE: Someone asked for code. Here is an example I just tested:
document.addEventListener("keydown.test", function(e){
console.log("doc.addEL test keydown, e=", e)
});
Looking in Chrome Dev Tools at the properties of the HTML element I can see the event listener there (with the code above). It is just not fired. Seems like it is just time to write yet another bug report then. ;-)
My bad. I misread the news that event handlers now can be removed using standard syntax. They can, but the syntax is that you give the event+handler function to removeEventListener.
The syntax I used above for the event, "keydown.test", is not a valid syntax (if you are not using jQuery).
Sorry for wasting your time. Hope someone can use the answer.

Detect image load in jQuery 1.8+ - alternative to load() since deprecation

Explanation
For reasons which I appreciate, as of jQuery 1.8, the load event has been deprecated, however, it was still possible to detect whether an image was loaded (even if it was in the cache) just by using certain workarounds. Therefore, the deprecation of the event is actually quite irritating as it posed as a starting point at the very least for detecting when an image has finished loading onto the page.
Nevertheless, it has been deprecated, and I am therefore asking this question with the hope that I will find an answer, thus, help me and potentially others that may soon be running into the same issue.
An Example (before jQuery 1.8)
Without using a plugin (as this should be able to be done in very little code, so a plugin is unnecessary), I would like to call a function when each image on my page is loaded.
Something like this (this will not work due to the deprecation):
$('#mn_content .column').on('load','img',function(){
console.log('loaded');
})
My Question
Is anybody aware of how to achieve this now that the load event does not exist?
Please note: If the only way to achieve this (now), is to use the Javascript new Image objects, then please do not waste your time helping me as others need your help more than I do. I am able to write this code, it just seems a bit long winded for something so basic.
I have simply asked this question to ensure there is not a way of achieving this without the use of the Javascript image objects
I will of course be very grateful for any help, I just don't want you spending much time on me when there are others that need your help more. :-)
The load event still exists, you just can't bind to it using .load anymore. Your event delegation example should continue to work on into 1.9 and 2.0 (if the browser you're testing in supports bubbling of the load event)
I personally would still use the new Image method because i don't trust that all browsers will always bubble the load event properly.
Edit: Sorry if i wasn't clear, the point i was making is that the load event is still there, you just have to properly bind to it. Since the load event doesn't bubble in all browsers (if in any browser?), you must bind the event directly to the image. I'd suggest using the method that you asked us not to provide you an example of.

Javascript / Jquery Problem with - playStateChange , Mediaplayer object IE9 ... trying to make Jquery bind() work on this event ...Read On

Ok now the problem is here ....
I first was trying to rule out whether to use a flash player an html5 player or a mediaplayer for this client ..... HTML5 seems to be offering implementation which is plugin free so i decided to opt out on Flash .... and was considering the HTML5 route ... all fine ... did a nice player which was also cross browser and took good care of the codecs but oops ... realised html5 was not able to stream ASX ... so it was back to the old windows mediaplayer route .... I had no real choice....
I put a javascript function which is just an alert and should be triggered whenever the mediaplayer changes state (say from play you pause it .... )
function WMP_status()
{
alert("state Changed");
}
I embedded a mediaplayer object on an html page and i created an alias in javascript to access that object programatically and gain control over it via javascript ......Like so ....
var WMP=document.getElementById("mediaplayer");
Then it was the turn of capturing the state of the mediaplayer ... so I required some form of event ... so I registered the event like so ....and worked fine...
WMP.attachEvent("playStateChange", WMP_status);
// Note ... WMP.detachEvent("playStateChange", WMP_status); ... doesn't always detach events...
I that in IE the problem of events not detaching still persisted (go figure) but to my surprise I realised that as of ie9 .... the addEventListener should have been also included as part of the javascript support so i tried the following line which should apparently stand for the above but no joy .....
WMP.addEventListener("playStateChange", WMP_status , false);
I maybe thought that addEventListener was not still properly implemented in IE9 so I tried to use the JQuery bind() method like so .... but still no joy ....
$(WMP).bind("playStateChange", WMP_status);
I tried also these 2 variants
(a) still no joy ....
$(WMP).bind("playStateChange", "WMP_status");
(b) still no joy .....
$(WMP).bind("playStateChange", function(){WMP_status()});
I tried these to eliminate all sorts of possibilities ... there was no info on the jquery site whether i could put in a function name or not ... so i tried putting in an anonymous one as well....
Anyways ... I'd really prefer to use the Jquery mechanism for event handling especially because of it's much more cross browser ... can anyone please help me on this one? I also went this route of dynamically attaching events because I will be adding / removing elements via jquery ... and remove() would also detach events conveniently ...
Many Thanks
Al
According to this site binding to wmp-plugin with a javascript library like jQuery won't work because of the missing on prefix (would read "onPlayStateChange") which is normally prefixing all event-names.
Libraries like jQuery take that rule in account ... and actually register to an non-existent event.
If that is true then you need to stay with attachEvent

Problem creating jQuery plugin with textareas

I'm trying to modify this script that emulates the Word 2007 minibar in a textarea. I have wrapped it in a plugin, the problem is that it will not work with multiple textareas.
You can try it out at JSBin
(Just select som text in the first textarea and then click on the "b")
Can someone help me? I'm kinda lost.
Update
Should have mentioned that it shows up correctly in the preview, but it adds double tags in the textarea. And it doesn't work in Firefox or IE. Why?
It is very hackish, so I was hoping for someone do show me how to do it right.
It only works in Chrome as of now
First we'll address the double tags issue, they happen because of these handlers:
$("#bold").click(function() { ... });
$("#italic").click(function() { ... });
$("#underline").click(function() { ... });
$("#link").click(function() { ... });
They're being bound inside your .each() loop, meaning a handler is being bound for each element you're running your code on, creating n handlers for the same #bold element, just move these handlers outside your .each() loop (and be sure to .unbind() them or use .live(), in case the plugin is run more than once as well).
While we're at it, we should move the $(document).mousedown(function() { ... }); out of that loop as well, same issue of not wanting to bind it multiple times.
Your IE/Firefox problems are mostly the result of how the example is setup on JSBin (jQuery not being defined because of the includes), not actual code issues with the plugin. However since .select() can be used across browsers I think you can eliminate the $.browser.msie clause, at least in IE8 it's not needed, but be sure to test older versions if you want to support them.
With only the changes above and some code formatting improvements (.css() can take an object for example), I've setup your code for testing here.

How to list all registered events of a DOM node using JavaScript?

I can add or remove an event handler for a DOM node. Is it possible to find out all the registered events handlers of a given DOM node? I am referring to straight Javascript meaning no frameworks or toolkits like jQuery, dojo, Prototype, GWT, etc. If the answer is no, any reason why? Security issues?
I know this is an old question, but just in case, for chrome you can use getEventListeners
getEventListeners function
as mentioned here:
https://stackoverflow.com/a/17466308/538752
DOM Level 3 specifies eventListenerList - however, I'm not aware of any DOM implementation which supports this - or any other reliable way to list the event listeners. It seems to have been an oversight to this point.
This works for Chrome/Safari console:
getEventListeners(document.getElementByID('myElementId'));
Visual Event can show you which events are registered, but it only works with DOM level 0 attached events; the W3C level 2 implementation as well as the Internet Explorer proprietary method are not supported and/or cannot be retrieved.
If your interest is to discover some event, in order to disable it - I came here because of that - I recommend to use the Firebug extension, with Mozilla Firefox. Selecting the part of the document, you are interested in, look at the right panel, the Events tab: you will see all events, and can even disable them.
Also, in Google Chrome, please select the element and notice the number, it will show you $0 or any other number.
Then in console, type this code and press enter.
getEventListeners($0)
and then you will see the result. Please see the image below for more elaboration.
I faced the same problem, landed here, and didn't find an useful answer.
In case you can execute script before addEventListener calls from other parties, you might do something really dirty like:
var obj = something; // Your DOM element you want to watch
var beforeAddEvent = obj.addEventListener;
obj.addEventListener = function() {
// Do something with arguments here (like storing in an array)
// arguments[0]: event name
// arguments[1]: Listener function
// arguments[3]: eventual options passed
// If you don't call this, the event listener won't even be attached, it might be also useful in some case
beforeAddEvent.apply(obj, arguments);
};

Categories

Resources