事件绑定
- 嵌入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设置被他创建的上下文
点击咨询 