<> one ,javascript Event basis

js The foundation is too important , I didn't feel familiar with the operation at the back , Come back and review again js Knowledge points of , So the latest updates are all some js Fragmentary knowledge points .
js An event is an operation after getting an element , If you don't know how to get elements, you can see the knowledge points of other bloggers ,

<>1, What is an event

js Enables us to create dynamic pages , Events are things that can be ignored js Behavior detected
Simple understanding is that the user operates the mouse or keyboard , Triggered js event , Then the corresponding mechanism is generated
For example, we click a button , Pop up dialog box

<>2, Three elements of events

Event source > Event type > Event handler

* Event source :
The object to which the event is triggered , Who triggered this event
*
Event type :
How to trigger , What event , Like a mouse click (onclick), Mouse past , Keyboard press .

*
Event handler :
This is done through a function assignment
var btn = document,getElementById(“btn”); btn.onclick = function (){ }
This is the simplest event
<>3, Steps for event execution

1, Get event source
2, Registration events ( Also called binding events )
3, Add event handler ( General use function function )

<>4. Operation element

js Of dom Operation can change the content of the web page , Structure and style , We can use it dom Manipulate elements to change the contents of elements Attributes, etc

1, Modify element content

element.Text and element.innerHTML
element.innerText
Content from start to end , But he got rid of it html The tags also remove spaces and line breaks Don't recognize HTML label Nonstandard
element.innerHTML
All contents from start position to end position , include HTML label , Spaces and newlines are kept at the same time , distinguish HTML label belong to w3c standard , It's used a lot
Both properties are readable and writable , You can get the content of the element

2, Modify element properties

Or the old method of operation :
Get the element first
Registration events processing program
Then directly call the attribute assignment of the element

<> two ,javascript Event advanced

primary coverage :
Two ways to register events
Two ways to delete events
DOM Three stages of event flow
Event object
Encapsulating compatibility functions to prevent bubbling
Principle of event delegation
Common mouse and keyboard events

<>1, Registration events

Add an event to an element , This is called a registration event or a binding event .
There are two ways to register events : Traditional ways and methods monitor registration methods

Traditional registration method :

utilize on Events at the beginning onclick
<button.onclick =“alert(‘hi’)”>
btn.onclick =function(){}
The characteristics are : Uniqueness of registration events
Only one handler can be set for the same element and event , The last registered handler will override the previous one
Because of the principle of uniqueness, this method is defective , It can only be used according to specific conditions

Method monitor registration method

w3c Standard way
addeEventListener() It's a method
stay IE9 before IE This method is not supported , have access to attachEvent( replace )
It is used more in the development of mobile terminal , Don't worry about compatibility

addEventList Event monitoring mode

eventTarget.addEventListener(type,listener[,useCapture])
ddEventListener() Method to register the specified listener with the (eventTarget)( Target object ) upper , When the object triggers the specified event , The event handler is executed
Meaning of three parameters :
type: Event type string such as click mouseover, Pay attention to this one on
It's a character type , Quotation marks are required

listener: Event handler , At the time of the event , The listener function is called

useCapture: Optional parameters , Is a Boolean value , The default is false

The advantage is that you can give an event . Adding multiple event handlers to the same element .
Defect compatibility IE9 The following are not compatible

It says lattachEvent, This is to solve the problem of compatibility , This method ie Can be used in , Not in other browsers
But in mdn Not recommended in the document . stay IE9 This method was used before . Just understand

There are also compatibility methods to use :
A function is encapsulated here , If you need it, you can use it directly
function addEventListener(element,eventName,fn) { // Determine whether the current browser supports addEventName method
if(element.addEventListener(eventName,fn); // The third parameter defaults to false }else if (element.
attachEvent){ element.attachEvent('on'+eventName,fn); }else{
// amount to element.onclick = fn ; element['on'+eventName] = fn ; }
Principles of compatibility handling : Take care of most browsers first , Reprocessing special browsers

<>2, Unbinding event

How to unbind an event

1, Traditional registration method
eventTarget.onclick = null;
var divs = document.querySelectorAll('div'); divs[0].onclick = function (){
alert(11); // For the first one div Unbind divs[0].onclick = null; }
2. Method monitor registration method
eventTarget.removeEventListener(type,listener[,useCapture]);

eventTarget.detachEvent(eventNameWidthOn,callback);
divs[1].addEventListener('click',fn); // It's used here fn It's because it can't be used directly in unbinding function So use fn Instead
divs[1].addEventListener('click',fn1); function fn(){ alert(22); divs[1].
removeEventListener('click',fn1); } divs[1].attachEvent('click',fn2); function
fn(){ alert(33); divs[1].rdatachEvent('click',fn2); }
Here I also encapsulate a compatibility function , It can be used directly
function removeEventListener(element,eventName,fn){
// Determine whether the current browser supports removeEventlistener method if( element.removeEventListener){ element.
removeEventListener(event,fn); }else if(element.detachEvent){ element.
detachEvent('on'+eventName,fn); }else{ element['on'+eventName] = null; } }
I'll write here for dinner , Come back in the evening and continue to write

<>3,DOM Events of

Event flow describes the order in which events are received from a page .
When an event occurs, it propagates between element nodes in a specific order , This communication process is called DOM event
DOM The event flow is divided into three phases

1. Capture phase
2. Current target stage
3. bubbling phase

Event Bubbling :IE First proposed , Events begin to be accepted by specific elements , And then it goes up to DOM The process of the topmost node
Event capture : Netscape first proposed , from DOM Top node start , It then propagates step by step down to the acceptance process of the most specific element .

Pay attention :

js Only one of the capture or bubble phases can be executed in the code
onclick and attachEvent, Only bubble phase can be obtained

addEventListener() If the third parameter is true, Call the event handler during the event capture phase ; If it is false( No, the default is false), Indicates that the event handler is called during the event bubbling phase .

<>4, Event object

definition :

An event object is a collection of data related to our event , Incident related , For example, mouse click contains mouse coordinates , Information about keyboard events , For example, determine which key the user presses

Specific location

div.onclick = function(event){}
event It's the object of the event

be careful :

1,event It's an event object , Write in the parentheses of the listening function , It can be seen as a formal parameter
2, Event objects exist only when they have events , It was created automatically by the system , We don't need to pass parameters
3, The event object does not have to be written event, We usually use e Instead , Custom name
4, Event objects also have compatibility issues .IE678 adopt window.event

Common properties and methods of event object

difference

.target and this The difference between :
this Is an element of event binding , The caller of this function ( Bind the element of this event )
e.target Is an event triggered element .

Compatibility solutions

There is a compatibility problem in obtaining the event object itself :

* In the standard browser, it is the parameters that the browser passes to the method , Just define the formal parameters e You can get it .
* stay IE6~8 in , The browser does not pass parameters to the method , If necessary , Need to window.event Find in .
solve :
e = e || window.event;
<>5, Prevent events from bubbling

Event Bubbling : Initially received by the most specific element , And then it goes up to DOM Topmost node .
The characteristics of the event bubble itself , What's the harm , There will also be benefits , We need to be flexible .

Two ways to prevent event bubbling :

standard notation : Using the stopPropagation() method
e.stopPropagation()
Non standard writing :IE 6-8 Using event objects cancelBubble attribute
e.cancelBubble = true;

Encapsulated compatibility function :
if(e && e.stopPropagation){ e.stopPropagation(); }else{ window.event.
cancelBubble= true; }
<>6, Delegation of events ( agent , delegate )

Event delegates are also called event proxies , stay jQuery It's called event delegation .

principle :

The event listener is not set separately for each child node , Instead, the event listener is set on its parent node , Then the bubble principle is used to affect the setting of each sub node
Function is to operate once DOM, The performance of the program is improved

<>7, Common mouse and keyboard events

To scatter flowers at the end !!!!!!!

Technology
©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element