The event object also has some compatibility problems. In IE8 and previous versions, when registering the event handler by setting properties, the event object is not passed when calling, which needs to be obtained through the global object window.event. The solution is as follows:
function getEvent(event) { event = event || window.event; }
On IE, the event event does not have the property of preventDefault(), so on IE, the property we need to set is returnValue
window.event.returnValue=false
stopPropagation() is the same, so you need to set cancelBubble. cancelBubble is a property of IE event object. Setting this property to true can prevent further propagation of events.
event.cancelBubble = true
1.2 UI events
load / / execute immediately after the page is completely loaded
unload / / the event occurs when the user exits
resize / / the event occurs when the window or frame is resized
Scroll / / triggered on the element when the user scrolls the contents of the element of the scroll bar
1.3 form click event
blur / / lose focus
<html> <head> <script type="text/javascript"> function setFocus() { document.getElementById('text1').focus() } function loseFocus() { document.getElementById('text1').blur() } </script> </head> <body> <form> <input type="text" id="text1" /> <br /> <input type="button" onclick="setFocus()" value="Set focus" /> <input type="button" onclick="loseFocus()" value="Lose focus" /> </form> </body> </html>
Focus / / get focus
select / / the text is selected
change / / when the content changes
Submit / / click the submit button to trigger
<html> <head> <script type="text/javascript"> function formSubmit(){ document.getElementById("myForm").submit() } </script> </head> <body> <form id="myForm" action="js_form_action.asp" method="get"> Firstname: <input type="text" name="firstname" size="20"><br /> Lastname: <input type="text" name="lastname" size="20"><br /> <br /> <input type="button" onclick="formSubmit()" value="Submit"> </form> </body> </html>
reset / / click reset to trigger
<html> <head> <script type="text/javascript"> function formReset(){ document.getElementById("myForm").reset() } </script> </head> <body> <p>Enter some text in the text box below, and then click the reset button to reset the form.</p> <form id="myForm"> full name:<input type="text" size="20"><br /> Age:<input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="Reset"> </form> </body> </html>
1.4 mouse events
onclick: / / triggered when the user clicks the mouse button or presses enter
onmouseover: / / triggered when the mouse moves over an element
onmouseout: / / triggered when the mouse moves over an element
onmousemove: / / triggered when the mouse pointer moves over an element
onmouseenter: / / when the mouse moves over an element (bubbling is not supported for child elements)
Onmouselive: / / the mouse leaves the element (bubbling is not supported for child elements)
Ondbllick: / / triggered when the user double clicks the main mouse button
onmousedown: / / triggered when the user presses the mouse button but does not pop up
onmouseup: / / triggered when the user releases the mouse button
1.5 keyboard events
keydown / / press any key on the keyboard
keypress / / press the character key on the keyboard
keyup / / release the key on the keyboard
Keyboard events
onkeydown: triggered when the user presses any key (except the function key) on the keyboard. If it is held down, it will be triggered repeatedly.
onkeypress: triggered when the user presses the ascii character key on the keyboard. If you hold it down, onkeyup will be triggered repeatedly: triggered when the user releases the key on the keyboard
summary
The above is what brings you to know from zero today JavaScript To the essence (18) JavaScript Events event object(in) Will continue to update It's not easy to be original. We look forward to your praise, attention and forwarding comments😜😜😜