JS- Event details

JS runs and compiles

Syntax analysis

Look for basic syntax errors

Preliminary analysis

The var and function keywords are advanced to the top of the current scope, the default value of variables is undefined, and the default value of functions is the body code block. If the function and variable have the same name, the function is retained.

Variable life cycle

The life of a global variable does not end until the browser unloads the page. Local variables exist only during the execution of the function, where they are allocated space on the stack or heap to store their values, and then used in the function until the end of the function

The event

User actions: onclick, ondblclick, onfocus, onblur, window.onload

It is the interaction between the user and the page. When the user carries out some “communication” with the page, the page will trigger some events through JS. For example, the onclick event will be triggered when the mouse clicks

Event type:

Mouse events: Click, dbclick, mousedown, mouseup, mouseover, mouseout, mouseEnter, mouseleave, Mousemove Mouseover: mouseover is triggered repeatedly when the mouse moves over an element and through its children mouseEnter: is triggered only when the keyboard event is entered into the element: Keydown, KeyUP, keyPress Form events: events triggered by operations on form elements such as checkboxes, checkboxes, and dropdown menus. Onchange events are triggered when the state of the form changes. Onsubmit is triggered when the form is submitted

This keyword: this in the event function refers to the event trigger object

Principle of events

Events work in a similar way to hover. Hover can do what :hover can’t, :hover can only operate on the current element, but can select any element after the event binding.

The event triggers three elements: by whom? By what? What do you do when triggered?

The way the event is written:

W3c standard: Events are inline, but because structure and behavior are separated, we usually use JavaScript methods to bind events. Only in rare cases, events are inline.

On + event handle = function(){what? (Put it in the browser, do not execute, execute when the event occurs.) } odiv.onclick =function(){alert (1)}Copy the code

Event summary: An event defines a preprocessor function for the browser. When the event is triggered, the function is executed. This is the event.

When an event is triggered, the Altman gets a message (event object) that encapsulates the attributes and methods associated with the event (such as the event element, keyboard state, mouse position, mouse button state, etc.), only when the event is triggered.

Odiv. onmousedown=function(e){alert (e); }Copy the code

JS immoral law: the event object has compatibility problem; So let’s make compatibility before we use event objects:

e=e || window.event; Alert (e.buttons) View the return value of buttons;Copy the code

Mouse events and methods;

Return to mouse click button (1 left button, 2 right button, 4 middle button wheel)

E.offsetx/offsetY gets the coordinates of the box (event source) closest to which the event was triggered

E. clientx/clientY get the coordinates of the viewable area (based on the location of the browser)

E.creenx/screenY gets the coordinates of the entire screen

E.pagex/e.pagey Get the coordinates of the document (including scroll bars)

Keyboard events: keyDown, KeyUp, keyPress

Document.onkeydown = function(e){console.log(e.keycode)} each key on the keyboard has a unique code that identifies which key on the keyboard the current user is operating

Have compatibility e.k eyCode | | e.w hich

Special key code: Whether to press Alt, CTRL and Shift

e.ctrlKey

e.shiftKey

The return value is Boolean;

It can be used to determine key combinations

If (e.keycode == 13&&e.alltkey) {alert(‘ Simultaneously press Enter and Alt ‘); }

Default behavior (browser)

There are some default behaviors of HTML elements, such as the A tag, which jumps when clicked; The input of type Submit in the form form has a default commit jump event; Input of type reset has the behavior of resetting the form.

However, sometimes we don’t need default events, so we need to prevent default events

Return false;

if(e.preventDefault) {
   e.preventDefault();
}else {
    window.event.returnValue = false;    
    //return false;
}
Copy the code

Oncontextmenu 2, form submit event onSubmit

Flow of events

When the child element’s event is fired, the parent element is also fired (bubbling). A complete stream of events includes the capture phase, the target phase, and the bubbling phase