Javascript use events, javascript events

Javascript use events, javascript events

        p{            background: gray;            color: white;            padding:10px;            margin:5px;            border: thin solid black;        }        span{            background: white;            color: black;            padding: 2px;            cursor:pointer;        }        a{            background:gray;            color:white;            padding: 10px;            border: thin solid black;        }        table{            margin: 5px;            border-collapse: collapse;        }        th,td{            padding: 4px;        }

1) use an attribute starting with "on" on the element to process events inline;

<P onmouseover = "this. style. background = 'white'; this. style. color = 'black' "onmouseout =" this. style. removeProperty ('color'); this. style. removeProperty ('background') "> based on the concept of" building integrity and Sustainable Development ", removeProperty provides customers with professional financial services, wealth management, and product solution recommendations. From afar, let's take a look at the professional advantages and effective information exchange platform that will create a professional, honest, win-win, and wise Service Platform for fund rich parties and fund demand sides, helping customers realize stable and safe value-added wealth and help more outstanding small and medium enterprises to successfully raise funds. </P>

2) define a function and use its name as the value in the attribute starting with on -- use a function to process events;

<P onmouseover = "handleMouseOver (this)" onmouseout = "handleMouseOut (this)"> building integrity, the concept of sustainable development provides customers with professional financial services, wealth management and product solution recommendations. From afar, let's take a look at the professional advantages and effective information exchange platform that will create a professional, honest, win-win, and wise Service Platform for fund rich parties and fund demand sides, helping customers realize stable and safe value-added wealth and help more outstanding small and medium enterprises to successfully raise funds. </P> <p onmouseover = "handleMouseOver (this)" onmouseout = "handleMouseOut (this)"> adhering to the professionalism of "dedication, hard work, hard work, unity and dedication, it has provided enterprises with transformation and upgrading, strategic planning and design, Group Establishment, organization management, quality management system, human resource management system, financial risk control and comprehensive Enterprise consulting and other services. We have also established long-term strategic partnerships with more than 100 enterprises .. </P>

    <script type="text/javascript">        function handleMouseOver(elem){            elem.style.background='white';            elem.style.color='black';        }        function handleMouseOut(elem){            elem.style.removeProperty('background');            elem.style.removeProperty('color');        }    </script>

3.1) use standard DOM search techniques and assign a function for attributes starting with "on"-use DOM to process events;

3.2) use the addEventListener method on the HTMLElement object representing the element-use DOM to process the event;

<P id = "block1"> building credibility, the concept of sustainable development provides customers with professional <span id = "licai"> Financial Management </span> services, wealth management, and product solution recommendations. From afar, let's take a look at the professional advantages and effective information exchange platform that will create a professional, honest, win-win, and wise Service Platform for fund rich parties and fund demand sides, helping customers realize stable and safe value-added wealth and help more outstanding small and medium enterprises to successfully raise funds. </P> <p id = "block2"> adhering to the professional spirit of "dedication, hard work, hard work, unity and dedication, it has provided enterprises with transformation and upgrading, strategic planning and design, Group Establishment, organization management, quality management system, human resource management system, financial risk control and comprehensive Enterprise consulting and other services. We have also established long-term strategic partnerships with more than 100 enterprises .. </P> <pre name = "code" class = "html"> <button id = "pressme"> click Remove event </button>

<Script type = "text/javascript"> <span style = "font-family: KaiTi_GB2312;"> // use Dom to construct event processing </span> var pElems = document. getElementsByTagName ("p"); for (var I = 0; I <pElems. length; I ++) {pElems [I]. onmouseover = handleMouseOver; pElems [I]. onmouseout = handleMouseOut;} function handleMouseOver (e) {e.tar get. style. background = 'white'; e.tar get. style. color = 'black';} function handleMouseOut (e) {e.tar get. style. removeProperty ('background'); e.tar get. style. removeProperty ('color');} </script>

<Script type = "text/javascript"> <span style = "font-family: KaiTi_GB2312;"> </span> // use the addEventListener and removeEventListener Methods var pElems = document. getElementsByTagName ("p"); for (var I = 0; I <pElems. length; I ++) {pElems [I]. addEventListener ("mouseover", handleMouseOver); pElems [I]. addEventListener ("mouseout", handleMouseOut);} document. getElementById ("pressme "). onclick = function () {document. getElementById ("block2 "). removeEventListener ("mouseout", handleMouseOut);} function handleMouseOver (e) {e.tar get. style. background = 'white'; e.tar get. style. color = 'black';} function handleMouseOut (e) {e.tar get. style. removeProperty ('background'); e.tar get. style. removeProperty ('color');} </script>

3.3) Functions and attributes of the Event object

Type -- event name (for example, mouseover );

Target -- elements pointed to by the event;

CurrentTarget -- element with the listener of the currently triggered event;

EventPhase: the stage of the event lifecycle;

Bubbles -- true is returned if the event is bubbling in the document; otherwise, false is returned;

Cancelable -- true is returned if the event has a default behavior that can be undone; otherwise, false is returned;

TimeStamp -- event creation time. If the event is unavailable, it is 0;

StopPropagation () -- terminate the event flow in the element tree after the event listener of the current element is triggered;

StopImmediatePropagation () -- terminate the event flow in the element tree immediately. Event Listeners that are not triggered on the current element will be ignored;

PreventDefault () -- prevents the browser from performing default operations associated with events;

DefaultPrevented -- If preventDefault () is called, true is returned;

<Script type = "text/javascript"> // <span style = "font-family: KaiTi_GB2312;"> use the type attribute </span> var pElems = document. getElementsByTagName ("p"); for (var I = 0; I <pElems. length; I ++) {pElems [I]. onmouseover = handleMouseEvent; pElems [I]. onmouseout = handleMouseEvent;} function handleMouseEvent (e) {if (e. type = "mouseover") {e.tar get. style. background = 'white'; e.tar get. style. color = 'black';} else {e.tar get. style. removeProperty ('background'); e.tar get. style. removeProperty ('color') ;}</script>

<Script type = "text/javascript"> <span style = "font-family: KaiTi_GB2312;" >/// </span> understand the event stream: capture, target, and bubble var licai = document. getElementById ("licai"); var textblock = document. getElementById ("block1"); licai. addEventListener ("mouseover", handleMouseEvent); licai. addEventListener ("mouseout", handleMouseEvent); textblock. addEventListener ("mouseover", handleDescendantEvent, true); textblock. addEventListener ("mouseout", handleDescendantEvent, true); textblock. addEventListener ("mouseover", handleBubbleMouseEvent, false); textblock. addEventListener ("mouseout", handleBubbleMouseEvent, false); function handleBubbleMouseEvent (e) {if (e. type = "mouseover" & e. eventPhase = Event. BUBBLING_PHASE) {e.tar get. style. padding = "5px";} else if (e. type = "mouseout" & e. eventPhase = Event. BUBBLING_PHASE) {e.tar get. style. removeProperty ('padding');} function handleDescendantEvent (e) {if (e. type = "mouseover" & e. eventPhase = Event. CAPTURING_PHASE) {e.tar get. style. border = "thick solid red"; e. currentTarget. style. border = "thick double black";} else if (e. type = "mouseout" & e. eventPhase = Event. CAPTURING_PHASE) {e.tar get. style. removeProperty ('border'); e. currentTarget. style. removeProperty ('border');} // e. stopImmediatePropagation (); // e. stopPropagation ();} function handleMouseEvent (e) {if (e. type = "mouseover") {e.tar get. style. background = 'white'; e.tar get. style. color = 'black';} else {e.tar get. style. removeProperty ('background'); e.tar get. style. removeProperty ('color') ;}</script>

<A href = "http://www.sina.com.cn"> visit Sina </a> <a href = "http://www.w3school.com.cn"> visit W3C </a>

<Script type = "text/javascript"> <span style = "font-family: KaiTi_GB2312; ">/// </span> undo the default behavior <span style =" font-family: KaiTi_GB2312; "> </span> function handleClick (e) {if (! Confirm ("Do you really want to access" + e.tar get. href +? ") {E. preventDefault () ;}}var elems = document. querySelectorAll ("a"); for (var I = 0; I <elems. length; I ++) {elems [I]. addEventListener ("click", handleClick, false) ;}</script>

3.4) Use HTML events

3.4.1) document event (document Object)

Readystatechange -- triggered when the value of the readyState attribute changes;

3.4.2) window event (window object)

Onabort-triggered when the document or resource loading process is terminated;

Onafterprint -- triggered when the window. print () method has been called but the print option has not been provided to the user;

Onbeforeprint -- triggered after the user prints the document;

Onerror -- triggered when an error occurs during document or resource loading;

Onhashchangge-triggered when the anchor part changes;

Onload: triggered when documents or resources are loaded;

Onpopstate -- after triggering, a State object associated with the browser history is provided;

Onresize -- triggered when the window is scaled;

Onunload -- triggered when the document is detached from a window or browser;

3.4.3) mouse events

Click -- triggered when the mouse button is clicked and released;

Dbclick -- triggered when you click and release the mouse button twice;

Mousedown-triggered when you click the mouse key;

Mouseenter -- triggered when the cursor moves into the screen area occupied by an element or a descendant element;

Mouseleave -- triggered when the cursor moves out of the screen area occupied by the element or all descendant elements;

Mousemove -- triggered when the cursor moves on the element;

Mouseout -- similar to mouseleave, It is triggered when the cursor is still on a descendant element;

Mouseover -- it is basically the same as mouseenter. It is triggered when the cursor is still on a descendant element;

Mouseup -- triggered when the mouse key is released;

3.4.3.1) MouseEvent object

Button -- indicates which key is clicked. 0 indicates the primary key of the mouse, 1 indicates the middle key, and 2 indicates the right-click;

AltKey -- if the alt/option key is pressed when the event is triggered, true is returned;

ClientX -- returns the X coordinate of the mouse relative to the element's viewport when an event is triggered;

ClientY -- returns the Y coordinate of the mouse relative to the element's view when an event is triggered;

ScreenX -- returns the X coordinate of the mouse relative to the screen coordinate system when an event is triggered;

ScreenY -- returns the Y coordinate of the mouse relative to the screen coordinate system when an event is triggered;

ShiftKey -- returns true if the shift key is pressed when the event is triggered;

CtrlKey -- returns true if the Ctrl key is pressed when the event is triggered;

<P id = "block1"> building credibility, the concept of sustainable development provides customers with professional <span id = "licai"> Financial Management </span> services, wealth management, and product solution recommendations. From afar, let's take a look at the professional advantages and effective information exchange platform that will create a professional, honest, win-win, and wise Service Platform for fund rich parties and fund demand sides, helping customers realize stable and safe value-added wealth and help more outstanding small and medium enterprises to successfully raise funds. </P> <table border = "1"> <tr> <th> Type: </th> <td id = "eType"> </td> </tr> <th> X: </th> <td id = "eX"> </td> </tr> <th> Y: </th> <td id = "eY"> </td> </tr> </table>

<Script type = "text/javascript"> // use the MouseEvent object to respond to the mouse event var textblock = document. getElementById ("block1"); var typeCell = document. getElementById ("eType"); var xCell = document. getElementById ("eX"); var yCell = document. getElementById ("eY"); textblock. addEventListener ("mouseover", handleMouseEvent, false); textblock. addEventListener ("mouseout", handleMouseEvent, false); textblock. addEventListener ("mousemove", handleMouseEvent, false); function handleMouseEvent (e) {if (e. eventPhase = Event. AT_TARGET) {typeCell. innerHTML = e. type; xCell. innerHTML = e. clientX; yCell. innerHTML = e. clientY;} if (e. type = "mouseover") {e.tar get. style. background = 'black'; e.tar get. style. color = 'white';} else {e.tar get. style. removeProperty ('color'); e.tar get. style. removeProperty ('background') ;}}</script>

3.4.4) keyboard focus event

Blur-triggered when the element loses focus;

Focus -- triggered when the element gets the focus;

Focusin -- triggered when the element is about to obtain the focus;

Focusout -- triggered when the element is about to lose focus;

3.4.5) Keyboard Events

Keydown -- triggered when the user presses a key;

Keypress -- triggered when the user presses and releases a key;

Keyup -- triggered when the user releases a key;

3.4.5.1) KeyboardEvent object

Char -- return the character represented by the key;

Key -- return the key pressed;

CtrlKey -- returns true if the Ctrl key is pressed when the key is pressed;

ShiftKey -- returns true if the shift key is pressed when the key is pressed;

AltKey -- returns true if the shift key is pressed when the key is pressed;

Repeat -- returns true if the key remains in the pressed state;

<Form> <p> <label for = "fave"> Fruit: <input autofocus id = "fave" name = "fave"/> </label> </p> <label for = "name"> Name: <input autofocus id = "name" name = "name"/> </label> </p> <button type = "submit"> submit </button> <button type = ""reset"> reset </button> </form> <br/> <span id = "message"> </span>

<script type="text/javascript">    var inputElems=document.getElementsByTagName("input");    for(var i=0;i<inputElems.length;i++){        inputElems[i].onkeyup=handleKeyboardEvent;    }    function handleKeyboardEvent(e){        document.getElementById("message").innerHTML="Key pressed: "+ e.keyCode+" Char："+String.fromCharCode(e.keyCode);    }</script>

3.4.6) Form Events

Submit -- triggered when the form is submitted;

Reset -- triggered when the form is reset;

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.