JavaScript Event Model Troubles

JavaScript
1

I’m studying off a Lynda.com JavaScript tutorial and trying to emulate how the instructor attaches event handlers to certain elements/objects in the DOM. This is the code from the example exercise.

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Modern Event Model</title>
<script type="text/javascript">
function addEventHandler(oNode, evt, oFunc, bCaptures)
{
	if (typeof(window.event) != "undefined")
		oNode.attachEvent("on"+evt, oFunc);
	else
		oNode.addEventListener(evt, oFunc, bCaptures);
}
function getEventTarget(e) {
	if (window.event) return window.event.srcElement;
	else return e.target;
}

function div1Handler(evt) {
	var e = evt || window.event;
	var target = getEventTarget(e);
	var str = "Event handler for div1, target: " + target.getAttribute('id') + " , type: " + e.type;
	if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
	alert(str);
	if (e.cancelBubble != null) e.cancelBubble=true;
	else e.stopPropagation();
}
function div2Handler(evt) {
	var e = evt || window.event;
	var target = getEventTarget(e);
	var str = "Event handler for div2, target: " + target.getAttribute('id') + " , type: " + e.type;
	if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
	alert(str);
}
function div3Handler(evt) {
	var e = evt || window.event;
	var target = getEventTarget(e);
	var str = "Event handler for div3, target: " + target.getAttribute('id') + " , type: " + e.type;
	if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
	alert(str);
	
}
function bodyHandler(evt) {
	var e = evt || window.event;
	var target = getEventTarget(e);
	var str = "Event handler for body, target: " + target.getAttribute('id') + " , type: " + e.type;
	if (e.eventPhase) str+=" ; phase: " + e.eventPhase;
	alert(str);
}

function initializeHandlers() {
	addEventHandler(document.getElementsByTagName("body")[0],"click",bodyHandler,true);
	addEventHandler(document.getElementById("div1"),"click",div1Handler,true);
	addEventHandler(document.getElementById("div2"),"click",div2Handler,true);
	addEventHandler(document.getElementById("div3"),"click",div3Handler,true);
	if (!window.event) {
		addEventHandler(document.getElementsByTagName("body")[0],"click",bodyHandler,false);
		addEventHandler(document.getElementById("div1"),"click",div1Handler,false);
		addEventHandler(document.getElementById("div2"),"click",div2Handler,false);
		addEventHandler(document.getElementById("div3"),"click",div3Handler,false);
	}
}

addEventHandler(window, "load", function(evt) { initializeHandlers() } );
</script>
</head>

<body>

<h1>Using the Modern Event Model</h1>
<div id="div1" style="border:1px solid #000000;padding:10pt;background:cornsilk">
	<p>This is div 1</p>
	<div id="div2" style="border:1px solid #000000;padding:10pt;background:gray">
		<p>This is div 2</p>	
		<div id="div3" style="border:1px solid #000000;padding:10pt; background:lightBlue">
			<p>This is div 3</p>
		</div>
	</div>
</div>


</body>

Weirdly enough, this only seems to work in FireFox and Internet Explorer, but not Google Chrome. The following is my code where I’m simply trying to use an event handler to try and trigger a simple alert function.

<head>
<title>Practice JavaScript</title>
<script type="text/javascript">

function addEventHandler(objectNode, eventType, func, capture) {
	if (typeof (window.event) != "undefined") {
		objectNode.attachEvent("on" + eventType, func); 
	}
	else {
		objectNode.addEventListener(eventType, func, capture);
	}
}

function alertInput() {
	addEventHandler(document.getElementsByTagName("input")[1], "", alert("test"), true);
	if (!window.event) {
		addEventHandler(document.getElementsByTagName("input")[1], "click", function() { alert("test") }, false);
	}
}

function regExpression(stringValue) {
	if (stringValue === null || stringValue.length === 0) {
		alert(false); }
	else {
		alert(stringValue); }
}

addEventHandler(window, "load", function(event) { alertInput() }, false);

</script>
</head>

<body>

<h1>Practicing JavaScript</h1>
<form type="POST" action="#" id="form">
<input id="userInput" type="text" size="60" /><br />
<input value="Submit" type="button" id="button" />
</form>

</body>

This page loads, then immediately alerts with the dialog box that reads “test”. What I’m trying to do is to make it alert “test” upon clicking the Submit button.

I’d appreciate any help because I’ve spent quite a few hours just trying to figure out why this basic JavaScript won’t work.

2 
 if (typeof(window.event) != "undefined")

That test is flawed, use:

function addEventHandler(objectNode, eventType, func, capture) 
{
    if (objectNode.attachEvent) {
        objectNode.attachEvent("on" + eventType, func);
    }
    else {
        objectNode.addEventListener(eventType, func, capture);
    }
}

function alertInput() {
    addEventHandler(document.getElementsByTagName("input")[1], "", alert("test"), true);
    if (!window.event) {
        addEventHandler(document.getElementsByTagName("input")[1], "click", function() { alert("test") }, false);
    }
}

There you could be installing two handlers, try:

function alertInput() 
{
 addEventHandler(document.getElementsByTagName("input")[1], "click", function(){alert("test");}, true);    
}
3

Jeez, now it works, haha. Thanks a ton, I really appreciate it.

Now I just have to spend the next 20 minutes understanding how my code didn’t and yours did. xD

Thanks again.

Edit: I found my error,

function alertInput() {
addEventHandler(document.getElementsByTagName(“input”)[1], “click”, function() { alert(“test”) }, true);
if (!window.event) {
addEventHandler(window.document.forms)[0], “submit”, function() { alert(“test”) }, false);
}
}

does not work, while

function alertInput() {
addEventHandler(document.getElementsByTagName(“input”)[1], “click”, function() { alert(“test”) }, true);
}

works. Apparently the additional if-statement makes it not work. Can anyone please explain why this does not work? I’d assume it just skips the if-statement.

4

Bump, can anyone enlighten me on this issue?

Edit: I found my error,

function alertInput() {
addEventHandler(document.getElementsByTagName("input")[1], "click", function() { alert("test") }, true);
if (!window.event) {
addEventHandler(window.document.forms)[0], "submit", function() { alert("test") }, false);
}
}

does not work, while

function alertInput() {
addEventHandler(document.getElementsByTagName("input")[1], "click", function() { alert("test") }, true);
}

works. Apparently the additional if-statement makes it not work. Can anyone please explain why this does not work? I’d assume it just skips the if-statement.

5

There’s a syntax error here:

addEventHandler(window.document.forms)[0], "submit", function() { alert("test") }, false);

Hint: it’s do do with a closing bracket.

6

Ah, its window.document.forms[0], thanks.