事件绑定
- 嵌入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 三级事件
dom3 具有更多事件类型
- 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__是用于访问函数实例化的对象的原型对象
函数拥有prototype属性,对象拥有__proto__属性,他们都是用来访问原型对象的
原型对象中有constructor属性,可以访问到这个函数
使用var let const 创建变量的区别
var
var会使变量提升,就可以在变量声明前面使用变量,不会报错,打印undefined,使用var声明的变量会将变量提升到作用域的顶端
var声明的全局变量,会作用于window对象上
var num=10 var num1=20 console.log(window.num,window.num1) //10 20
let
let声明的变量不会变量提升,let声明的变量值可以改变,作用域块级作用域中不会作用于window里
const
const声明的变量和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设置被他创建的上下文