JavaScript DHTML/Event/General Event

Материал из Web эксперт
Перейти к: навигация, поиск

Add event handler to form

   
<html> 
<head> 
<title>W3C DOM Event Propagation</title> 
<script type="text/javascript"> 
function init() { 
    document.forms[0].addEventListener("click", formBubbleEvent, false); 
} 
function formBubbleEvent(evt) { 
    alert("FORM only on BUBBLE."); 
} 
function getPhase(evt) { 
    switch (evt.eventPhase) { 
        case 1: 
        return "CAPTURING"; 
            break; 
        case 2: 
        return "AT TARGET"; 
            break; 
        case 3: 
        return "BUBBLING"; 
            break; 
        default: 
        return ""; 
    } 
} 
</script> 
</head> 
<body onload="init()"> 
<form> 
<input type="button" value="Button "main1"" name="main1" onclick="alert("button (" + getPhase(event) + ").")" /> 
</form> 
</body> 
</html>



addEventListener or attachEvent

  

<html>
<head>
<title>Options</title>
<script type="text/javascript">
function openwin(e) {
    if (typeof window.open != "undefined") {
        var opened = window.open("http://www.google.ru","","width=240,height=480");
        if (typeof e.preventDefault != "undefined") {
            e.preventDefault();
            e.stopPropagation();
        }
        e.cancelBubble = true;
        return false;
    } else {
        return true;
    }
}
</script>
</head>
<body>
<a href="#" id="my">Go?</a>
<script type = "text/javascript">
var mslink = document.getElementById("my");
if (window.addEventListener) {
    mslink.addEventListener("click",openwin,false);
} else {
    mslink.attachEvent("onclick",openwin);
}
</script>
</body>
</html>



Add event listener to anchor link

  
<html>
<head>
<title>Onclick</title>
<script type="text/javascript">
function handleclick() {
    document.write("Clicked");
    return false;
}
</script>
</head>
<body>
<p><a id="link1" href="#">Click Here</a></p>
<script type = "text/javascript" >
var link1 = document.getElementById("link1");
if (typeof window.addEventListener != "undefined") {
    link1.addEventListener("click",handleclick,false);
} else {
    link1.attachEvent("onclick",handleclick);
}
</script>
</body>
</html>



An Example of Changing Event Handlers

  
<html>
<head>
<script language="JavaScript">     var choice = "A"
     function optionA() {
      alert("optionA" );  
     }
   
     function optionB() {
        alert("optionB" );  
     }
     
</script>
</head>
<body>
   
<form name="form1">
<input type="button" name="button1"  onClick="optionA()">
</form>   
<script language="JavaScript">
     if (choice != "A") {
          document.form1.button1.onclick=optionB
     }
</script>
</body>
</html>



Bubble up events (Firefox)

   
<html>
<head>
<title></title>
<script type="text/javascript">
function writeX(evnt) {
   document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
   return true;
}
function setup(evnt) {
   document.addEventListener("click",writeX,false);
   document.forms[0].addEventListener("click",writeX,false);
   document.forms[0].elements[0].addEventListener("click",writeX,false);
}
setup();
</script>
<body>
<form>
     <input type="submit" value="Submit" /><br>
</form>
</body>
</html>



Calling a Function from an Event Handler

   
<html> 
<head> 
<script type="text/javascript"> 
function showMsg(msg) { 
    document.write("The button sent: " + msg); 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="Click Me" 
onclick="showMsg("The button has been clicked!")"> 
</form> 
</body> 
</html>



Capturing events

   
<html>
<head>
<title></title>
<script type="text/javascript">
function writeX(evnt) {
   document.write("Capturing" + evnt.target + " " + evnt.currentTarget);
   return true;
}
function setup(evnt) {
   document.addEventListener("click",writeX,true);
   document.forms[0].addEventListener("click",writeX,true);
   document.forms[0].elements[0].addEventListener("click",writeX,true);
}
setup();
</script>
<body>
<form>
     <input type="submit" value="Submit" /><br>
</form>
</body>
</html>



Emulating Events

  

<HTML>
<HEAD>
<TITLE>Simulating Events</TITLE>
<SCRIPT><!--
function button1Clicked() {
 document.test.button2.click()
}
function button2Clicked() {
 alert("Button 2 was clicked!")
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test">
<INPUT TYPE="BUTTON" NAME="button1" VALUE="Button 1"
 ONCLICK="button1Clicked()">
<INPUT TYPE="BUTTON" NAME="button2" VALUE="Button 2"
 ONCLICK="button2Clicked()">
</FORM>
</BODY>
</HTML>



Event Bubbling Demonstration

   
<html onclick="alert("Event is now at the HTML element.")"> 
<head> 
<title>Event Bubbles</title> 
<script type="text/javascript"> 
function init() { 
    window.onclick = winEvent 
    document.onclick = docEvent; 
    document.body.onclick = docBodEvent; 
} 
function winEvent() { 
    alert("window object level."); 
} 
function docEvent() { 
    alert("document object level."); 
} 
function docBodEvent() { 
    alert("BODY element."); 
} 
</script> 
</head> 
<body onload="init()"> 
<form onclick="alert("FORM")"> 
<input type="button" value="Button "main1"" name="main1" onclick="alert("Button: " + this.name)" /> 
</form> 
</body> 
</html>



Event Bubbling (Firefox)

   
<html>
<head>
<title>Event Bubbling</title>
<script type="text/javascript">
function mouseDown(nsEvent) {
  var theEvent = nsEvent ? nsEvent : window.event;
  var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
  var theSrc = theEvent.target ? theEvent.target : theEvent.srcElement;
  document.write(locString + " " + theSrc);
}
document.onmousedown=function (evnt) {
   var theEvnt = evnt? evnt : window.event;
   document.write(theEvnt.type);
}

window.onload=function () {
   document.getElementById("first").onmousedown=mouseDown;
   document.getElementById("second").onmousedown=function () {
      document.write("Second event handler");
   }
}
</script>
</head>
<body>
<div id="first" style="padding: 20px; background-color: #ffff0; width: 150px">
  <div id="second" style="background-color: #ff0000; width: 100px; height: 100px"></div>
</div>
</body>
</html>



Event filer: number Only, upper case

  
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->

function numberOnly(evt) {
    evt = (evt) ? evt : ((window.event) ? event : null);
    if (evt) {
       var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
       if (elem) {
           var charCode = (evt.charCode) ? evt.charCode : 
               ((evt.which) ? evt.which : evt.keyCode);
           if ((charCode < 32 ) || 
               (charCode > 44 && charCode < 47) || 
               (charCode > 47 && charCode < 58)) {
               return true;
           } else {
               return false;
           }
       }
    }
}
----------
function upperOnly() {
    var charCode = event.keyCode;
    if (charCode > 96 && charCode < 123) {
        event.keyCode = charCode - 32;
    }
}



Event Handlers and this

   
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=setObjects;
function setObjects() {
   document.personData.firstName.onblur=testValue;
}
function testValue() {
   document.write(this.value);
}
</script>
</head>
<body>
<form name="personData">
First Name: <input type="text" name="firstName" />
</form>
</body>
</html>



Event type occured

  
<html>
<head>
<script type="text/javascript">
function whichType(event){
    alert(event.type)
}
</script>
</head>
<body onmousedown="whichType(event)">
<p>Click on the document. </p>
</body>
</html>



Get Positioned Event Coordinate

  
<!-- 
     Example File From "JavaScript and DHTML Cookbook"
     Published by O"Reilly & Associates
     Copyright 2003 Danny Goodman
-->

function getPositionedEventCoords(evt) {
    var elem = (evt.target) ? evt.target : evt.srcElement;
    var coords = {left:0, top:0};
    if (evt.layerX) {
        var borders = {left:parseInt(getElementStyle("progressBar", 
                       "borderLeftWidth", "border-left-width")),
                       top:parseInt(getElementStyle("progressBar", 
                       "borderTopWidth", "border-top-width"))};
        coords.left = evt.layerX - borders.left;
        coords.top = evt.layerY - borders.top;
    } else if (evt.offsetX) {
        coords.left = evt.offsetX;
        coords.top = evt.offsetY;
    }
    evt.cancelBubble = true;
    return coords;
}



Inline DOM Event Registration

   
<html>
<head>
<title>Inline DOM Event Registration</title>
<script type="text/javascript">
function helloMsg() {
    var helloString = "hello there";
    document.write(helloString);
}
function helloTwice() {
    var helloString = "hi again";
    document.write(helloString);
}
window.onload=helloTwice;
</script>
</head>
<body onload="helloMsg();">
</body>
</html>



JavaScript Event Handlers

  
<html>
<head>
<script language="JavaScript">
<!--
     var noticeWindow
   
     //onClick event handler
     function displayHat() {
        hatWindow = window.open("http://www.wbex.ru","ViewHat" ,"toolbar=0,width=200,height=400,resizable=0");
     }
   
     //onSubmit event handler
     function confirmOrder() {
       return confirm("on submit");
     }
   
     //onChange event handler
     function convertToUppercase(fieldObject) {
        fieldObject.value = fieldObject.value.toUpperCase();
     }
   
     // onFocus event handler
     function selectContents(fieldObject) {
        fieldObject.select();
     }
   
     // onMouseOver event handler     
     function updateStatusBar() {
       window.status = "mouse over";
       return true
     }
   
     // onMouseOut event handler
     function updateStatusBarOut() {
       window.status = "";
       return true
     }
   
     // onSelect event handler
     function accessText() {
        alert("Success");
     }
   
// -->
</script>
</head>
<body>
<a href="http://www.wbex.ru" 
   name="linker" 
   onMouseOver="return updateStatusBar()" 
   onMouseOut="return updateStatusBarOut()">www.wbex.ru</a>
</p>
<form method="POST">
<input type=button name="ViewHat" value="View Hat" onClick=displayHat()></p>
</form>
   
<hr>
<form action="JavaScript:alert("order")"
     method="POST"
     name="MainForm"
     onSubmit="return confirmOrder()">
<h2>Customer Information</h2>
<pre>    First Name: 
    <input type=text size=20 maxlength=20 name="FirstName" onFocus="selectContents(this)">     
    Last Name: 
    <input type=text size=20 maxlength=20 name="LastName" onFocus="selectContents(this)">
    Title: 
    <input type=text size=30 maxlength=30 name="Title" onFocus="selectContents(this)">
    Company: 
    <input type=text size=30 maxlength=30 name="Company" onFocus="selectContents(this)"> 
    Street Address: 
    <input type=text size=30 maxlength=30 name="StreetAddr" onFocus="selectContents(this)">
    City: 
    <input type=text size=30 maxlength=30 name="City" onFocus="selectContents(this)">State: 
    <input type=text size=3 maxlength=2 name="State" onFocus="selectContents(this)" onChange="convertToUppercase(this)">
    Zip Code: 
    <input type=text size=30 maxlength=10 name="ZipCode" onFocus="selectContents(this)">     
    Telephone: 
    <input type=text size=12 maxlength=12 name="Phone" onFocus="selectContents(this)">
    FAX: 
    <input type=text size=12 maxlength=12 name="FAX" onFocus="selectContents(this)"> 
    Email: 
    <input size=30 maxlength=50 name="Email" onFocus="selectContents(this)">
    URL: 
    <input type=text size=30 maxlength=100 name="URL" onFocus="selectContents(this)"></pre>
<hr>
   
<blockquote>
<p><textarea name="worthyBox" rows=3 cols=49 onFocus="selectContents(this)">
</textarea></blockquote></p>
   
<p><input type=submit value="Order" onClick="confirmOrder("Submit object")">
<input type=reset value="Clear Form" onClick="alert("Clearing!")"></p>
</form>
   
<a href="JavaScript:displayHat()"><img src="http://www.wbex.ru/style/logo.png" align=bottom border=0 width=50 height=50>
</a>
   
</body>
</html>



Preventing Bubble and Capture

   
<html> 
<head> 
<title>W3C DOM Event Propagation</title> 
<script type="text/javascript"> 
function init() { 
    document.body.onclick = docBodEvent; 
    document.addEventListener("click", docEvent, true); 
    document.forms[0].addEventListener("click", formCaptureEvent, true); 
    document.forms[0].addEventListener("click", formBubbleEvent, false); 
} 
function docBodEvent(evt) { 
    if (evt.target.type == "button") { 
       alert("BODY"); 
    } 
} 
function formCaptureEvent(evt) { 
    if (evt.target.type == "button") { 
        alert("This alert triggered by FORM only on CAPTURE."); 
        if (document.forms[0].stopAllProp.checked) { 
            evt.stopPropagation(); 
        } 
    } 
} 
function formBubbleEvent(evt) { 
    if (evt.target.type == "button") { 
        alert("This alert triggered by FORM only on BUBBLE."); 
        if (document.forms[0].stopDuringBubble.checked) { 
            evt.preventBubble(); 
        } 
    } 
} 
</script> 
</head> 
<body onload="init()"> 
<form> 
<input type="checkbox" name="stopAllProp" />Stop all propagation at FORM
<input type="checkbox" name="stopDuringBubble" />Prevent bubbling past FORM 
<input type="button" value="Button "main1"" name="main1" onclick="alert("button")" /> 
</form> 
</body> 
</html>



Setting Event Handlers from within JavaScript

  

<HTML>
<HEAD>
<TITLE>Setting event handlers from within JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function handler1() {
 document.test.result.value="Set by handler1"
 document.test.clickMe.onclick=handler2
}
function handler2() {
 document.test.result.value="Set by handler2"
 document.test.clickMe.onclick=handler1
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test">
<INPUT TYPE="BUTTON" NAME="clickMe" VALUE="Click Me!">
<P><INPUT TYPE="TEXT" NAME="result" SIZE="20"></P>
</FORM>
<SCRIPT LANGUAGE="JavaScript"><!--
 document.test.clickMe.onclick=handler1
//--></SCRIPT>
</BODY>
</HTML>



W3C Event Capture and Bubble

   
<html> 
<head> 
<title>W3C DOM Event Propagation</title> 
<script type="text/javascript"> 
function init() { 
    window.onclick = winEvent; 
    document.onclick = docEvent; 
    document.body.onclick = docBodEvent; 
    document.addEventListener("click", docEvent, true); 
    document.forms[0].addEventListener("click", formCaptureEvent, true); 
    document.forms[0].addEventListener("click", formBubbleEvent, false); 
} 
function winEvent(evt) { 
    alert("window object level (" + getPhase(evt) + ")."); 
} 
function docEvent(evt) { 
    alert("Document level (" + getPhase(evt) + ")."); 
} 
function docBodEvent(evt) { 
    alert("BODY level (" + getPhase(evt) + ")."); 
} 
function formCaptureEvent(evt) { 
    alert("FORM only on CAPTURE."); 
} 
function formBubbleEvent(evt) { 
    alert("FORM only on BUBBLE."); 
} 
function getPhase(evt) { 
    switch (evt.eventPhase) { 
        case 1: 
        return "CAPTURING"; 
            break; 
        case 2: 
        return "AT TARGET"; 
            break; 
        case 3: 
        return "BUBBLING"; 
            break; 
        default: 
        return ""; 
    } 
} 
</script> 
</head> 
<body onload="init()"> 
<form> 
<input type="button" value="Button "main1"" name="main1" onclick="alert("button (" + getPhase(event) + ").")" /> 
</form> 
</body> 
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Event/General_Event&oldid=2117»