This makes my life a bit easier. After executing this script you should be able to addEventListener on all elements instead of determining if you want to call attachEvent or addEventListener.
Edit: This is the original version. The revised version is below
if (!document.addEventListener && document.attachEvent)
{
Object.prototype.addEventListener = function(eventName, func, capture)
{
if (this.attachEvent)
this.attachEvent('on' + eventName, func);
}
var i, l = document.all.length;
for (i = 0; i < l; i++)
document.all[i].addEventListener = Object.prototype.addEventListener;
This one is harder to use but it is nicer to the DOM and all newly created objects. The problem with it is that addEventListener will only be available after the page loads.
If you want to use addEventListener from a window.onload script make sure that this code is included in the body, not in the head. document.body.onload is called before window.onload.
Now, only elements that already have attachEvent will get an addEventListener. Elements created with document.createElement will automatically get addEventListener.
function createIEaddEventListeners()
{
if (document.addEventListener || !document.attachEvent)
return;
function ieAddEventListener(eventName, handler, capture)
{
if (this.attachEvent)
this.attachEvent('on' + eventName, handler);
}
function attachToAll()
{
var i, l = document.all.length;
for (i = 0; i < l; i++)
if (document.all[i].attachEvent)
document.all[i].addEventListener = ieAddEventListener;
}
var originalCreateElement = document.createElement;
document.createElement = function(tagName)
{
var element = originalCreateElement(tagName);
if (element.attachEvent)
element.addEventListener = ieAddEventListener;
Today I have been testing the event models from Netscape 4.8 and IE 4 to the current crop of browsers. I'd like to write a small event library similar in purpose to the Yahoo! UI event library but with less features and code. The Yahoo! event library is one of the best libraries in YUI but it still seems to me to have some confused code...that or I'm still confused.
The Yahoo! UI library focuses on using addEventListener and attachEvent. However, due to the click and dblclick bugs in Safari a long legacy event workaround is included to use a Netscape4-type event model for Safari. Something like this
var listeners = [function(event){}, function(event){}]; document.getElementById('blue').onmouseover = function(event) { for (var i=0; i<listeners.length; i++) { listeners[i](event); } };
With this above example, multiple handler functions can be fired for a single event. I imagine that this is an old trick that has been around for a long time, yes?
With all the new browsers I tested with this legacy workaround, the listener handlers can use event.stopPropogation() or event.cancelBubble=true and they work as desired. The handler functions can also use event.preventDefault() and event.returnValue=false and they too work. These seem to work because the event object passed to the handlers is a modern event object and not one from Netscape4.
My question is, if Safari needs this legacy workaround, and the legacy workaround seems to work in all the browsers that have addEventListener or attachEvent, then why bother with the addEventListener and attachEvent functions at all? Why not just use the legacy way for all browsers and all type of events.?
I was using this script to learn how to use event listeners and I need to know how to make it work for IE. I keep finding attachEvent scripts that look like they will work, but I get nothing. I've spent several hours finding script after script that simply don't work. I don't know where to turn next. Any script to attach these events to IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]"> <html> <head> <title>Test</title> </head> <body><div> <script type="text/javascript">
if(!Array.prototype.link) Array.prototype.link = function(f) { for(var Obect1 = new Array(), i = 0, n = this.length, t = arguments[1]; i < n; i++) Obect1[i] = f.call(t, this[i], i, this);return Obect1;}; Array.prototype.linkMethod = function(m) { var n = this.length, args = this.slice.call(arguments, 1);if(typeof m == "string" && n > 0) m = this[0][m];for(var Obect2 = [], i = 0; i < n; i++) Obect2[i] = m.apply(this[i], args);return Obect2;}; .....
I'm trying to add a clickevent to an anchor that I created trough DOM. This his how the code looks:
var oSubLink = document.createElement("A"); oSubLink.appendChild(document.createTextNode("+")); oCel.appendChild(oSubLink); oSubLink.addEventListener("click", klapUit(oTabel.id, eigenschappen[2]), false);
It failes at the addEventListener call, saying "No such interface supported" (appears to be one of the two default error messages IE gives when it can't handle your JS :mad: ).
How can I fix this? The solution should work in IE6, FF, Opera, Mozilla and Safari.
Is there a way to send parameters to the function being added to an event with addEventListener. I.E. say you have this function
Code: function someFcn(i){ alert(i); } and I add it to an object.
Code: someElement.addEventListener('focus', someFcn, false); Is there a way to send a parameter to someFcn. For Example I have tried this but it failed
Code: var someString = 'Hello World' someElement.addEventListener('focus', someFcn(someString), false);
When you use addEventListener (or addEvent in IE) to call an object method, does it call it with the correct this parameter?
The ECMAScript reference has a lot to say about the caller using Function.prototype.call or Function.prototype.apply and passing the correct this pointer for the context, but how does addEventListener determine the correct this pointer. Or does it just punt and pass the global context, thus making it impossible to refer to the object this in an object method used as an event listener?
Task: I would like to implement a CtrlEnter event that would work on both IE and FF.
My approach: use addEventListener() and attachEvent() to capture the event then trigger a function to check for CtrlEnter: if (oTarea.addEventListener) { oTarea.addEventListener('keyup', function() {checkCtrlEnter(event);}, false); } else if (oTarea.attachEvent) { oTarea.attachEvent('onkeyup', function() {checkCtrlEnter(event);}); }
function checkCtrlEnter(e) { if (e.ctrlKey && e.keyCode == 13) { // do something } return false; }
element.event NS3+, IE4+, dunno about opera or others
Since I'm only concerned with attaching a single event and don't care about bubbling/capturing, am I best off not using the old style of event registering to assure maxium compatibility?
I've been using window.onerror to capture and report JavaScript errors from other users for debugging an application I've written. But I've run into a strange issue with Firefox and window.onerror.
It seems that any code that executes, having originated from an "element.addEventListener", causing an error does not activate "window.onerror". But it does at least show up in Firefox's JavaScript error console. Internet Explorer doesn't appear to suffer from the same issue when it uses it's equivalent "element.attachEvent".
Does anyone know why this is and if there is any workarounds or if it's possibly a bug? Code:
I am trying to create a script that will cover cross-browser limitations in adding event listeners to elements. I have found plenty of resources to add a listener but can't find any way of assigning a function containing arguments. Here is what I have so far:
/* Attach events regardless of browser */
function addEvent(obj, evType, fn) { if (obj.addEventListener) { obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent) { var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; }}
/* Contains all attachments to be made on page load */
function load() { item = document.getElementById('toggleControl'); addEvent(item, 'click', toggle);
/* Add event to page load and assign load() function */
addEvent(window, 'load', load);
The actual functions for toggle and runAlert are in a seperate .js file, but are standard functions. the problem is that I can't find a way to perform the equivalent of:
I've created an object and within this object, I've added an eventlistener. But the problem now is that after addEventListener is being called to access a callback function, the callback function is not able to access the properties within its own class. Code:
I use addEventListener and I cannot (or at least don't know how) pass arguments to the function.
Let's say we have a function: function warning(arg1, arg2) {alert('Argument 1: ' + arg1 + ', Argument2: ' + arg2 + '.');}
It's possible to have: onclick="warning('my argument 1', 'my argument 1');" as an html attribut.
But I think it's not posible to do it like this (still the same function): el.addEventListener("click", warning('my argument 1', 'my argument 1'), false);
Is there a way to pass arguments to the callback function used inside an addEventListener? I see that I can only list the name of the callback function. For eg, I use this:
var boldLink=document.getElementById('cmtbold'); boldLink.addEventListener("click", rBold, true);
I need the id of boldLink to be accessible from inside the function rBold()
On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:
igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt)
[Code]....
This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index?
the below code is for a form that is validated against some external (valid.js) functions. It's my first forray into Event Delegation and stupidly (testing in FF only just now) I didn't realise that the addEventListener isn't recognised in IE. Anyone got an idea which way I should look at sorting it. I am still searching and playing around but can't seem to find the right solution.
I have been reading and practicing Javascript for the last month and so far I'm happy with it. I noticed that you can add Event Listeners and trigger a function based on that event but I also noticed that you could add an event directly to any element as an attribute, something like:
Code: <p onclick="doSomething()">Click Me</p> function doSomething(){ //do something }
So my question is why would someone add and event listener instead of adding that event directly in the element (as the sample above)? The reason I'm asking is because adding event listeners involves more code: Code: var elementName= document.getElementById('elemenstsID'); elementName.addEventListener("click", doSomething, false);
I guess what I don't know understand is why would someone choose to add an event listener instead, I know it is more OOP but doesn't the "onclick","onload" etc., do the same thing?
On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:
igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt)
[Code]....
This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent).
Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element.it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly?Here's my Code:
<script type='text/javascript'> // Startup Script if (document.addEventListener) {
Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this...