Firstly and most important thing, log my favorite reference as following:
JavaScript fundamental http://www.javascriptkit.com/jsref/document.shtml
Of course, the story doesn't just end there. Like learning anything in life, you need to constantly get your feet wet in the subject matter. In terms of learning JavaScript, this has meant constantly programming in the language, and reading tutorials and articles on it. I sincerely wish all of you JavaScript "endeavorers" out there the best of luck on mastering this essential web language...
Brief: This article explains JavaScript / DOM how to handle Events.
Context
1.
Event Handler
1.1)1.
One Event handler
1.1)2.
The onerror event of the window object
1.1)3.
Event handling in DOM
1.1)3.1.1.
The 2 traditional ways of assigning event handlers
1.1)3.1.2.
The DOM event flow
1.1)3.1.3.
Assigning event handlers in the DOM
1. Event handler
1.1) One event handler, many actions
The secret to having an event handler be able to call multiple functions/statements inside of it is the semicolon (;). Simply add your statements or functions inside the event handler, but separate EACH of them with a semicolon. <form><input type="button" value="Click here!" onClick="alert('You are about to visit a help forum'); window. location='http://www.codingforums.com'"></form>
1.2) The onerror event of the window object
In this tutorial, let’s examine a rather secretive event handler of JavaScript that fires whenever a JavaScript error occurs in a page. Using it, we can create custom JavaScript error dialog boxes, or better yet, suppress all JavaScript errors in the document.
Understanding the onerror event and the syntax is as follows:
<script>
window.οnerrοr=//function to run when an error occurs
</script>
<head>
<script type="text/javascript">
function tellerror(){
alert('An error has occurred!')
}
window.οnerrοr=tellerror
</script>
<script type="text/javascript">
document.write('hi there'
</script>
</head>
We defined a function (tellerror) that simply alerts a message by itself. Now look at how it is hooked up to the onerror event- through the function's name, without the normal parentheses. You should follow this rule whenever hooking up a function to the onerror event (or any event defined in this manner). In the above example, the careless JavaScript programmer had forgotten to close the document.write() method with a closing parentheses. run it to see what happens. As you can see, not only did the usual error box pop up, function tellerror was executed as well.
Let's sum up what we've gone through up to now. The onerror event is defined by attaching it directly to the window object, inside the <script> tags. The code to be executed should be attached to the right of the event handler, defined as a function, and without the usual parentheses. This function is executed whenever a js error occurs.
Just one more thing before we move on. Notice the placement of the onerror code in the above example; it is declared prior to any other codes, defined inside the <head> section, and wrapped around in its own <script> tags. This is necessary to ensure that the onerror event intercepts all scripting errors in the page.
Retrieving additional information about a JavaScript error through scripting
<head>
<script type="text/javascript">
function tellerror(msg, url, linenumber){
alert('Error message= '+msg+'/nURL= '+url+'/nLine Number= '+linenumber)
return true
}
window.οnerrοr=tellerror
</script>
<script>
document.write('hi there'
</script>
</head>
1.3) Event handling in the DOM
Event handling has been part of JavaScript since the language’s inception. As described in above items, they refer to specific, user imitated actions within the webpage, such as the moving of your mouse over a link, the clicking on a link, our submission of a form, Thanks to event handing, our scripts are more interactive and are able to perform certain actions depending on the user’s.
we explore event handling in the DOM, and the differing support for it in IE5+ and NS6+/Firefox.
1.3.1) The 2 traditional ways of assigning event handlers
A) Via HTML using attributes
We can define an event handler directly inside the relevant HTML tag, by embedding it as a attribute. A piece of JavaScript is also included to tell the browser to perform something when the event occurs. For example,
<a href="http://freewarejava.com" onMouseover="window.status='Click here for Java applets';return true" onMouseout="window.status=''">Freewarejava.com</a>
B)Via scripting
You can also assign and set up event handlers to elements using scripting, and inside your script. This allows for the event handlers to be dynamically set up, without having to mess around with the HTML codes on the page. When setting up event handlers for an element directly inside your script, the code to execute for the events must be defined inside a function. Just look at the below, which does the same thing as above, but with the event handler defined using scripting:
<a ID="test" href="http://freewarejava.com">Freewarejava.com</a>
<script type="text/javascript">
function changestatus(){
window.status="Click here for Java applets"
return true
}
function changebackstatus(){
window.status=''
}
document.getElementById("test").οnmοuseοver=changestatus
document.getElementById("test").οnmοuseοut=changebackstatus
</script>
Above we attached the tow functions to execute for the two events-the function names without the ().
1.3.2)The DOM event flow
The DOM introduces a new concept for detecting events and assigning corresponding event handlers to react to them.Naturally, it also supports the 2 conventional techniques discussed earlier.
How events are handled in the DOM? Event capture or event bubbling
In the other words, this question explains DOM how to interpret a user action. For example, <table onClick="alert('Hello!')"> <b><a href="#">This is some text</a></b> </table>
Event capture:
consider user action of moving the mouse over a link.
Mouse over document
-->Mouse over talbe->Mouse over any containment tags of <A>
Event bubbling:
consider user action of click the link, event traverses upwards from A to B and eventually reaching TABLE. a->b->table;
NS6’s event flow is Event caputure+Event bubbling;
IE5+ is Event bubbling; Good thing it retains the better half.
1.3.3) Assigning event handlers in the DOM
A) Assigning event handlers in NS6+Firefox
object.addEventListener(event, function, capture)
object.removeEventListener(event, function, capture)
-event should contain the event you wish to detect, such as click (onclick minus the "on" prefix)
-function should contain the reference call to the function to execute for this event, such as dothis (dothis() minus the parenthesis)
-capture should contain the Boolean value "true" or "false"; A value of "true" causes function to be executed when the event is detected at the capture phase. A value of "false" causes function to be executed when event is at bubble phase.
-function should contain the reference call to the function to execute for this event, such as dothis (dothis() minus the parenthesis)
-capture should contain the Boolean value "true" or "false"; A value of "true" causes function to be executed when the event is detected at the capture phase. A value of "false" causes function to be executed when event is at bubble phase.
B) Assigning event handlers in IE5+
object.attachEvent(eventname, function)
object.detachEvent(eventname, function)
-eventname
should contain the full event name you wish to detect, such as onclick
-function should contain the reference call to the function to execute for this event, such as dothis (dothis() minus the parenthesis)
-function should contain the reference call to the function to execute for this event, such as dothis (dothis() minus the parenthesis)
<div id="test">
Some text over div
</div
var mozilla=document.getElementById && !document.all;
var ie=document.all;
if(mozilla) document.getElementById("test").addEventListener("mouseover",alertit,false);
if(ie) document.getElementById("test").attachEvent("onmouseover",alertit);
C)Make both IE and mozilla handle eventlistener in your scripting
Example: appear a context menu
<div id="context_menu" style="width:150px;border:1px solid black;background-color:#EEEEEE;visibility:hidden;position:absolute;line-height:30px; padding-left: 10px">
<a href="http://www.codingforums.com">Coding Forums</a><br />
<a href="http://www.dynamicdrive.com">Dynamic Drive</a><br />
<a href="http://www.cssdrive.com">CSS Drive</a><br />
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><br />
<a href="http://www.builder.com/">Builder.com</a><br />
</div>
<script type="text/javascript">
var mozilla=document.getElementById && !document.all
var ie=document.all
var contextisvisible=0
function iebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function displaymenu(e){
el=document.getElementById("context_menu")
contextisvisible=1
if (mozilla){
el.style.left=pageXOffset+e.clientX+"px"
el.style.top=pageYOffset+e.clientY+"px"
el.style.visibility="visible"
e.preventDefault()
return false
}
else if (ie){
el.style.left=iebody().scrollLeft+event.clientX
el.style.top=iebody().scrollTop+event.clientY
el.style.visibility="visible"
return false
}
}
function hidemenu(){
if (typeof el!="undefined" && contextisvisible){
el.style.visibility="hidden"
contextisvisible=0
}
}
if (mozilla){
document.addEventListener("contextmenu", displaymenu, true)
document.addEventListener("click", hidemenu, true)
}
else if (ie){
document.attachEvent("oncontextmenu", displaymenu)
document.attachEvent("onclick", hidemenu)
}
</script>
1202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
