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.