the web browser generates an event whenever something happens to the document or browser or to some element or object associated with it . For example, the web browser generates an event when it finishes loading a document, or when the user moves the mouse over a link .
The event type, or event name , is a string that specifies what kind of event occurred . for example, the type “load” means that a document has finished loading . this name is used to identify the specific kind of event we’re interested in .
Events also have a target, which is the object on which they occurred. When we speak of an event, we must specify both the event type (the name) and the target, for example :
a click event on an HTMLButtonElement object , or a readystatechange event on an XMLHttpRequest object.
or in other words :
A load event on a Window, or a click event on a <button> Element.
If we want our program to respond to an event, we write a function known as an “event handler,” “event listener,” or “callback” . Programs register this function , specifying an event type and an event target . so that it is invoked (“fired”, “triggered”, or “dispatched” the event)when the event occurs.
this can be done using HTML attributes, but this is discouraged.
Handling Events via HTML Attributes
<html>
<head>
<title>JavaScript</title>
<script language="JavaScript"
type="text/javascript">
function showText() {
window.alert("Welcome to JavaScript!");
}
</script>
</head>
<body onload="showText();">
</body>
</html>
Instead, the simplest way to register an event handler is usually to assign a JavaScript function to a property of the target object, with code like this :
window.onload = function() { ... };
document.getElementById("mid").onclick = function() { ... };
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){ alert(this.id); };
// alerts -> myBtn
function handleResponse() { ... }
request.onreadystatechange = handleResponse;
two methods to deal with the assignment and removal of event handlers:
addEventListener() and removeEventListener() .
These methods accept three arguments:
the event name to handle,
the event handler function,
and a Boolean value indicating whether to call the event handler during the capture phase ( true ) or during the bubble phase ( false ).
To add an event handler for the click event on a button :
var btn = document.getElementById(“myBtn”);
btn.addEventListener(“click”,
function(){ alert(this.id); },
false);
IE implements methods similar to the previous ones called attachEvent() and detachEvent() . These methods accept the same two arguments: the event handler name and the event handler function. Since IE only supports event bubbling, event handlers added using attachEvent() are attached on the bubbling phase.
To add an event handler for the click event on a button using attachEvent() :
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){ alert(“Clicked”); });
Note that the first argument of attachEvent() is “ onclick ” as opposed to “ click ” in the addEventListener() method.
No comments:
Post a Comment