event

  • Embedded in the dom
<button onclick="btn()"><button>
Copy the code
  • Direct binding
document.querySeleor('button').onclick=function(){}
Copy the code
  • Event listeners
document.querySeleor('button').addEventListener('click'.function(){})
Copy the code

Event delegation

Event delegation is the use of its own event bubble, through the parent element to the child element event delegation, benefits: memory saving. Ex. :

The event model

Dom zero-level events

<button onclick='btn()'</button> btn.onclick=function(){}
btn.onclick=null
Copy the code

Dom secondary event

  • Dom2 events can bubble up and be captured
  • By property name.addeventListener (‘ method name ‘, callback function)
  • Property name.removeEventListener (‘ Method name to remove ‘, callback function name)
btn.addEventListener('click'.function test(){})
btn.removeEventListener('click',test)
Copy the code

Dom Level 3 events

Dom3 has more event types

  • UI events that are triggered when a user interacts with a page element, such as LOAD, SCrol
// Triggered when the page scrolls
document.addEventListener('scroll'.function(){
	console.log('1')})Copy the code
  • Focus events that are triggered when the user gains or loses focus, such as focus, blur
<input type='text' placeholder='Please enter your name'>
<script>
// To get focus, print 1
document.querySelecor('input').addEventListener('focus'.function(){
	console.log(1)})// When out of focus, print 2
document.querySelecor('input').addEventListener('blur'.function(){
	console.log(1)})</script>
Copy the code
  • Mouse events: when the user uses the mouse to perform operations on a page, such as: Click dblclick mouseover mouseout mousedown mouseup mousemove
  • Text events that are triggered when a user enters text in a document, such as textInput
  • Keydown (triggered when the keyboard presses any key) KeyUp (triggered when the keyboard plays up) KeyPress (triggered when the keyboard presses a non-special key) keyCode Obtains the keyboard press
document.querySelector('input').addEventListener('keydown'.function(e){
	// Prints 1 when the enter key is pressed
	if(e.keyCode==13) {console.log(1)}})Copy the code
  • The change event, which is triggered when everything changes, change

How do I customize events

let event=new Event('blick')
window.addEventListener('blick'.function(e){
	console.log(122)
    //e.target returns the element when triggered
    // e.currenttarget returns the element bound to the event
})
window.dispatchEvent(event)
Copy the code

Prototype and __proto__

Prototype is the prototype object that accesses the function

__proto__ is the prototype object used to access the object instantiated by the function

Functions have a Prototype property, objects have a __proto__ property, both of which are used to access the prototype object. The prototype object has the constructor property, which allows access to this function

Use var let const to create the difference between variables

var

Var raises the variable, so you can use the variable in front of the declaration without error, print undefined, and use var to raise the variable to the top of the scope

The global variable declared by var will be applied to the window object

var num=10
var num1=20
console.log(window.num,window.num1) / / 10 20
Copy the code

let

Variables declared by lets are not promoted, values of variables declared by lets can be changed, and the block-level scope does not apply to Windows

const

Variables declared by const are mostly the same as those declared by let, but const, once declared and assigned, cannot be changed afterwards

Object shallow copy and deep copy difference

  • A copy of a simple data type is a copy of a variable
  • The reference data type copies the address of the variable
  • For objects, a shallow copy is a copy of the address of the data without recreating an object
  • Deep copy, which creates a new object and copies its member variables

Implement deep copies of objects

function deepCopy(origin,map=new WeakMap(a)){
	if(! origin||isObject(origin))return origin
    if(typeof origin=='function') {return eval('('+origin.toString()+') ')}let objType=getObject(origin)
    let result=createObj(origin,objType)
    // To prevent circular references, objects already in the map will not be traversed because the previous layer is traversing
    if(map.get(origin)){
    	return map.get(origin)
    }
    
    map.set(origin,result)
    
    //set
    if(objType==setTag){
    	for(let value of origin){
        	result.add(deepCopy(value,map))
        }
        return result
    }
    
    //map
    if(objType==mapTag){
    	for(let [key,value] of origin){
        	result.set(key,deepCopy(value,map))
        }
        return result
    }
    // Object or array
    if(objType==objectTag||objType==arrayTag){
    	for(let key in origin){
        	result[key]=deepCopy(origin[key],map)
        }
        return result
    }
    return result
}
function getObjType(obj){
	return Object.prototype.toString.call(obj)
}
function createObj(obj,type){
	if(type==objectTag) return {}
    if(type==arrayTag) return []
    if(type==symbolTag) return Object(Symbol.prototype.valueOf.call(obj))
    return new obj.constructor(obj)
}
function isObject(origin){
	return typeof  origin=='object'||typeof origin=='function'
}
Copy the code

Communication between multiple pages

  • cookie
  • web worker
  • SessionStorage and locateStorage

The reference to this in javascript

  • With the new keyword, this points to the instantiated object from new
  • When you create a function using the call, apply, or bind methods, this points to the object passed in by those methods
  • When a function is called as an object, this refers to the object, as in obj.math(), where this refers to obj
  • If the function is not called as an up-order method, this refers to the window top-level object
  • In the arrow function of ES5, this does not apply the ordering rule; this sets the context in which it was created