Develop Reference

Passing console.log as listener for events

See the following fiddle: http://jsfiddle.net/calvintennant/jBh3A/
I would like to use console.log as a listener for an event :
badButton.addEventListener('click', console.log);
As demonstrated in the fiddle, this will result in an error.
I understand how to circumvent the error (by wrapping console.log in another function). What I would like to know is why the error happens. Is there some security feature preventing the use of native functions being used in this way?

That's because inside the log function, this must be the console (it's implementation dependant). If you pass it directly as event handler, this would be the widget as you can see by trying
goodButton.addEventListener('click', function(e) { console.log(this);});
Another solution than wrapping it in a function you create is to pass console.log.bind(console) (but not if you want to be compatible with IE8) :
goodButton.addEventListener('click', console.log.bind(console));

What is the behavior of addEventListener when you try and add a non-existent event?

For example:
someElement.addEventListener("blahblah", alert("hello!"));
When typed into both the Chrome and Firefox development consoles seems to fire the alert("hello!") call once and then return 'undefined'.
If I embed that same call into the page, then nothing seems to happen - no error is fired, no interesting value is returned, etc.

It is just a custom event, which can be also be fired.
However, the problem you got in your test is that you need to pass a function as a handler, not undefined which the invoked alert() returns. Try these:
el.addEventListener("foo", alert.bind(window, "hello!"));
or
el.addEventListener("bar", function(e){ alert("hello "+e.name); });

JavaScript error "Function is expected"

I have several listeners like this, which listen to click and then displays content within <div id="c50"><a hre...>CONTENT</a></div> (in this case). Everything works in Opera, Chrome and FF, but not in IE.
google.maps.event.addListener(pano50, 'click', function() {
fireEvent(document.getElementById("c50").getElementsByTagName("a")[0], 'click');
})
Chrome javascript console tool displays this error after click (but works fine):
Uncaught TypeError: object is not a function
but traditionally, IE8 displays:
Function expected on line 817
which is the first line of code above and do nothing after click. Thank you for any advice!
EDIT: here is the fireEvent function:
function fireEvent(element, event) {
if (document.createEventObject){
/* for IE */
return element.fireEvent('on' + event, document.createEventObject());
}else{
/* for other browsers */
var evt = document.createEvent('HTMLEvents');
evt.initEvent(event, true, true);
}
return !element.dispatchEvent(evt);
}

You've got MooTools running on your page. MooTools overrides IE's built-in element.fireEvent() method with its own normalized method that works for all browsers. MooTools' version of fireEvent() expects "click" instead of "onclick".
You can fix this one issue by simply changing your fireEvent function to use "click" instead of "onclick":
/* for IE */
return element.fireEvent(event, document.createEventObject());
But, since MooTools normalizes element.fireEvent to work with all browsers, you may be able to ditch your fireEvent function, and instead just call element.fireEvent() directly.
You may have bigger problems. You are using MooTools and jQuery side by side which is ok, but if you don't know what you are doing, you can get into trouble quickly.

It's possible it's complaining because
document.getElementById("c50").getElementsByTagName("a")[0]
is not a function. Where is the fireEvent function coming from?

Adding a javascript function call to an event (such as 'window.resize') instead of overwriting what is already there

Is there a way to tell the browser to run an addtional java script function on an event such as 'window.resize' instead of overwriting what is already there?
Using jquery's
$(window).resize(<something>);
Seems to replace what is already there. Is there a way to tell it to do something in addition?
Is this a poor design / wrong way to do it?

I wouldn't think that jQuery would break what's there, but you could wrap the functions in a single function:
// if a function already exists...
if( window.onresize ) {
var prev_func = window.onresize; // cache the old function
window.onresize = function( event ) { // new function for resize
prev_func.call( window, event ); // call the old one, setting the
// context (for "strict mode") and
// passing on the event object
// call your code or function
};
}
EDIT: Fixed it to use onresize instead of resize.
EDIT2: Missed one! Fixed.

If you're using jQuery to bind all event handlers, then you're not breaking anything. jQuery supports multiple handlers for same event.
But if other code (not using jQuery) binds to the event, then you'll overwrite handler with your statement. The solution will be: always use jQuery for event binding or try to save old handler (see patrick dw's answer).

See element.addEventListener (element.attachEvent in IE 8 and under):
// Standards
if (window.addEventListener){
window.addEventListener("resize", callOnResize, false);
// IE 8 and under
} else if (window.attachEvent){
window.attachEvent('resize', callOnResize);
}
function callOnResize() {
console.log("resized");
}
Keep in mind this is pure JavaScript—jQuery (and pretty much any big JS library) has a method to handle creating standards and IE handlers without you needing to write each. Still, it's good to know what's happening behind the scenes.

jQuery and all other frameworks supporting custom events attach a function to the event of the elem (or observe it). That function then triggers all functions that have been bound (using bind) for a specific event type.
domelement.addEventListener does not override an other function and your function added can't be removed by other (bad) javascript, except when it would know the exact footprint of your function.

JavaScript event handlers -why no alert?

I'm a newbie at JavaScript trying to learn event handlers. Looking at this fiddle http://jsfiddle.net/mjmitche/uV4kv/ can anyone tell me why the pop up is not appearing when the link is clicked?
I've also copied the code below
click me
function addEventHandler(oNode, sEvt, fFunc, bCaptures){
if (typeof(window.event) != "undefined")
oNode.attachEvent("on"+sEvt, fFunc);
else
oNode.addEventListener(sEvt,fFunc,bCaptures);
}
function onLinkClicked(e) {
alert("you clicked the link");
}
function setUpClickHandler(){
addEventHanlder(document.getElementById('clickLink'), "click", onLinkClicked, false);
}
addEventHandler(window,"load",setUpClickHandler,false);

There are basically three problems:
You have some typos, e.g. "Hanlder" instead of "Handler" and "Sevt" instead of "sEvt".
The code is already run after page load, so the event handler you add to window will never be called. Change in jsFiddle from onLoad to no wrap (head).
You "IE detection" does not work. I get this error in Chrome:
Uncaught TypeError: Object http://fiddle.jshell.net/_display/# has no method 'attachEvent'.
Better would be to test whether the function window.attachEvent exists. I also think that window.event is only available when an event is raised.
If this is corrected, your code will run (DEMO).
Further notes:
Testing which method is supported (i.e. attachEvent or addEventListener) on every call of your function is unnecessary. It won't change during the life of the page. Better is to test only once at the beginning. Example:
var addEventHandler = (function() {
if(window.attachEvent) {
return function(oNode, sEvt, fFunc) {
oNode.attachEvent("on"+sEvt, fFunc);
};
}
else {
return function(oNode, sEvt, fFunc, bCaptures) {
oNode.addEventListener(sEvt,fFunc,bCaptures);
};
}
}());
This assigns a function the supported function to addEventHandler.

A couple of problems:
You have a recurring typo, "Hanlder" instead of "Handler". There are at least two, one where you do your setUpClickHanlder (sic) function, and one within it (addEventHanlder).
Also, you have "Sevt" where you mean "sEvt". (JavaScript is case sensitive.)
Let tools help you. Use a browser that gives you a console showing errors. Use a debugger for single-stepping through code, looking at variable values at runtime with inspectors, etc.

Your addEventHandler needs adustment:
function addEventHandler(oNode, sEvt, fFunc, bCaptures) {
oNode.attachEvent ? oNode.attachEvent ("on" + sEvt, fFunc) :
oNode.addEventListener (sEvt, fFunc, bCaptures);
}
It is in event handlers themselves that you need to check for window.event