事件绑定

• 嵌入dom中

<button onclick="btn()"><button>

• 直接绑定

document.querySeleor('button').onclick=function(){}

• 事件监听

document.querySeleor('button').addEventListener('click',function(){})

事件委托

事件模型

dom零级事件

<button onclick='btn()'>点击</button>
btn.onclick=function(){}
btn.onclick=null

dom 二级事件

• dom2事件可以冒泡和捕获
• 是通过属性名.addEventListener('方法名'，回调函数)
• 属性名.removeEventListener('要移除的函数方法名'，回调函数名)

btn.addEventListener('click',function test(){})
btn.removeEventListener('click',test)

dom 三级事件

• ui事件，当用户与页面元素交互时触发，例：load，scrol

//当页面滚动的时触发
document.addEventListener('scroll',function(){
	console.log('1')
})

• 焦点事件，当用户获取或失去焦点时触发，如focus，blur

<input type='text' placeholder='请输入姓名'>
<script>
//获取焦点时，打印1
document.querySelecor('input').addEventListener('focus',function(){
	console.log(1)
})
//失去焦点时,打印2
document.querySelecor('input').addEventListener('blur',function(){
	console.log(1)
})
</script>

• 鼠标事件：当用户通过鼠标在页面操作时，如：click(鼠标单击) dblclick(鼠标双击) mouseover(鼠标移入) mouseout(鼠标移出) mousedown(鼠标按下) mouseup(鼠标弹起) mousemove(鼠标移动)
• 文本事件，当用户在文档中输入文本时触发，如textInput
• 键盘事件，当用户按下键盘时触发，如：keydown(键盘按下任一键时触发) keyup(键盘弹起时触发) keypress(键盘按下非特殊键时触发) keyCode获取键盘按下的

document.querySelector('input').addEventListener('keydown',function(e){
	//当按下回车键时打印1
	if(e.keyCode==13){
    	console.log(1)
    }
})

• 改变事件，当每个东西发生改变时触发，change

如何自定义事件

let event=new Event('blick')
window.addEventListener('blick',function(e){
	console.log(122)
    //e.target 返回触发时的元素
    //e.currentTarget  返回绑定事件的元素
})
window.dispatchEvent(event)

prototype和__proto__的关系

函数拥有prototype属性，对象拥有__proto__属性，他们都是用来访问原型对象的 原型对象中有constructor属性，可以访问到这个函数

使用var let const 创建变量的区别

var

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

let

const

对象浅拷贝和深拷贝的区别

• 简单的数据类型的拷贝是拷贝的变量
• 引用数据类型拷贝的是变量的地址
• 对于对象，浅拷贝是指对于数据的地址进行拷贝，没有重新创建一个对象
• 深拷贝，创建了一个新的对象，并复制其成员变量

实现对对象的深拷贝

function deepCopy(origin,map=new WeakMap()){
	if(!origin||isObject(origin)) return origin
    if(typeof origin=='function'){
    	return eval('('+origin.toString()+')')
    }
    let objType=getObject(origin)
    let result=createObj(origin,objType)
    //防止循环引用，不会遍历已经在map中的对象，因为上一层正在遍历
    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
    }
    //对象或数组
    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'
}

多个页面之间的通讯

• cookie
• web worker
• sessionStorage和locateStorage

javascript 中的this的指向

• 在使用new关键字，this的指向是new出来的实例化对象
• 如果使用call、apply、bind方法调用、创建一个函数时，函数中的this指向这些方法传入的对象
• 函数作为对象被调用时候，this指向这个对象，例obj.math(),函数内this指向obj对象
• 如果调用函数不是作为上序方法，this指向window顶级对象
• 在es5中的箭头函数，this不适用上序规则，this设置被他创建的上下文