Home > Developer > JavaScript
O (∩_∩) o~~ is a new week to start, today still continue to learn JavaScript knowledge, today is mainly about the knowledge of the event. Let's summarize it now.
Event
events are typically used for browser and user actions to interact. First appeared in IE and Netscape Navigator as a means of sharing server-side computing load. Event handling is supported until almost all browsers. Instead, the DOM2-level specification begins to attempt to standardize DOM events in a compound logical manner. IE9, Firefox, Opera, Safari, and Chrome all have implemented the core of the DOM2-level events module. IE8 before the browser still uses its proprietary event model.
JavaScript has three event models: inline model, script model, and DOM2 model.
Inline model: A method of handling events with traditional orders, and HTML is mixed, and is not separated from HTML.
Executing the event handler function as an attribute in HTML JS function
<input type= "button" value= "buttons" onclick= "box ();"/>//execute JS function // function must not be placed in the window.onload, so it is not visible
Scripting model: Because the inline model violates the principle of separating HTML from JavaScript code hierarchy. To solve this problem, we can handle events in JavaScript. This approach is the scripting model.
<script> function () { var// get input Object function () { //Anonymous functions Execute alert (' Lee ');}; }; </script>Note: With anonymous functions, the corresponding code can be triggered directly. Functions can also be executed by assigning a value to the specified function name (do not follow the parentheses for the assigned function name) Input.onclick = box; assigning function names to event handlers
event handler function: the types of events that JavaScript can handle are: mouse events, keyboard events, HTML events.
Note: All event handlers are made up of two parts, the on + event name, for example, the Click event handler is the onclick
Mouse events: All elements of the page can be triggered
<script>window.onload=function () { //Mouse Click event (first notation)Document.getelementsbyname ("name") [0].onclick =function () {
Alert ( This. Value);
//Mouse Click event (the second way, you can write the method separately, the last assignment)
functionClick () {
Alert ( This. Value); }
Document.getelementsbyname ("Name") [1].onclick =Click; } }; }; </script>
<body>
<form>
<input type= "button" name= "Name" value= "click"/><br/><br/>
<input type= "button" name= "Name" value= "click function Execution"/><br /><br/>
</form>
</body>
function () {alert (this. value);};function () {alert (this. value);};function () {alert (this. value);};function () {alert (this. value);};function () {alert (this. value);};function () {alert (this. value);};Keyboard events:
KeyDown: When the user presses any key on the keyboard to trigger, if you press and hold, the trigger will be repeated.
KeyPress: When the user presses the character key on the keyboard to trigger, if you press and hold, the trigger will be repeated.
KeyUp: When the user releases the key trigger on the keyboard
HTML event:
function () {alert (' Hello World ');};function () {alert (' Hello World ');};function () {alert (' Hello World ');};function () {
Alert (' Hello World ');
};function () {alert (' Hello World ');};function () {alert (' Hello World ');};function () {alert (' Hello World ');}function () {alert (' Hello World ');}Event object: One of the standard features of event handlers is that the event object accessed in some way contains contextual information about the current event.
Event handling consists of three parts: an object. event handler function = function
Example: Click anywhere in the document
<script> function () { alert (' Lee '); }; </script>Note: The above procedure is interpreted as a noun: Click indicates an event type and clicked. The onclick represents a property of an event handler or bound object (or an event listener, listener). Document represents a bound object that is used to trigger an element area. function () Anonymous functions are functions that are executed and executed after triggering.
In addition to using anonymous functions as functions that are executed, they can also be set up as separate functions
// Direct assignment of function names, without parentheses function Sayhi () {alert (' Hello World ');}Event object, which we generally call an event object, is a browser that passes the object as a parameter through a function.
function Sayhi () { // common null parameter function alert (arguments.length); // did not get any arguments passed }function // execution functions for event bindings alert (arguments.length); // get a hidden parameter };
Through the above two sets of functions, we find that the execution function through event binding can get a hidden parameter. Note that the browser automatically assigns a parameter, which is actually the event object.
Above this kind of practice is more tired, then the relatively simple approach is, directly by receiving parameters to get.
function // Accept Event object, name not necessarily event var e = evt | | window.event; // achieve cross-browser compatibility Get event object //MouseEvent, mouse event object };
Event Flow
The event flow is a description of the order in which events are accepted from the page, and when several elements with events cascade together, then you click on one of the elements, not only the currently clicked element will trigger the event, but all the elements stacked in your click range will trigger the event. The event flow consists of two modes: bubbling and capturing.
event bubbling is triggered from inside to outside. Default
event captures are triggered from the outside to the inside.
function () {Alert(' I am the document 'function () {alert (' I am HTML'function () {alert (' I am body ');}; document.getElementById (function () {alert (' I am div ');}; document.getElementsByTagName (function () {alert (' I am input ');};The above example is done in this way:
Block Event bubbling:
function Stoppro (evt) {var e = evt | | true : E.stoppropagation ();}
Well, I'll write about it here today .... O (∩_∩) o~~~
JavaScript Knowledge-Events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
