总结BOM+事件

BOM

窗口位置window

window.screenX/window.screenLeft

返回浏览器窗口左上角相对于当前屏幕左上角的水平距离，前者兼容火狐浏览器，后者不兼容
补充：window是js提供的顶级对象，我们所写的一切变量函数

打开窗口

window.open()/window.close()

打开一个新的浏览器窗口，接受四个参数（URL/打开方式/窗口参数/是否取代当前页面历史记录的布尔值）

screen对象

功能：包含显示设备信息

location对象

功能：保存当前文档信息、将URL解析成独立片段

navigator对象（重要）

navigator.userAgent()浏览器嗅探

识别当前浏览器型号和版本
检测是否是移动端

function isPhone() {
	var is=false;
    var arr=['iOS','iPhone','Android','iPad','iPod'];
    for(var i=0;i<arr.length;i++){
        if (navigator.userAgent.includes(arr[i])) {
            // 移动端
            is=true;
            break;
        }
    }  
    return is;
}

事件

补充：e：事件对象，包含了该事件所有的相关信息

dShop.onmousemove=function (e) {
        // 兼容写法
        var e=e||window.event;
}

闭包

形式：函数里实现另一个函数
作用：局部变量数据持久化
缺点：造成一定的内存压力

鼠标事件

onclick单击

ondblclick双击

oncontextmenu右键菜单

onmouseover移入

onmouseout移出

onmouseenter移入

onmouseleave移出

onmousedown按下

onmouseup抬起

onmousemove移动

按下抬起的移动要写在函数里

dMove.onmousedown=function (e) {
    var e=e||window.event;
    //获取元素
    window.onmousemove=function (e2) {
    	//具体操作
    }
}

补充：推荐使用enter和leave，因为over和out在鼠标进入子元素子级时会触发

键盘事件

keydown当用户按下键盘上的任意键时触发，按住不动将重复触发，keyup当用户释放键盘上的键时触发

触屏事件

ontouchstart

ontouchmove

ontouchend

ontouchcancel当系统停止跟踪触摸时触发

碰撞

判断是否碰撞
a,b是两个元素
function isCrash(a,b) {
	var l1=a.offsetLeft;
	var t1=a.offsetTop;
	var r1=l1+a.offsetWidth;
	var b1=t1+a.offsetHeight;

	var l2=b.offsetLeft;
	var t2=b.offsetTop;
	var r2=l2+b.offsetWidth;
	var b2=t2+b.offsetHeight;

	if (r2<l1||b2<t1||r1<l2||b1<t2) {
		return false;
	}else{
		return true;
	}

}

冒泡和捕获

同一个事件由子级向父级逐层传递称之为冒泡

同一个事件由父级向子级逐层传递称之为捕获

阻止冒泡
e.stopPropagation();
阻止冒泡的兼容写法
var e=e||window.event;
 if (e.stopPropagation) {
    e.stopPropagation();
 }else{
     e.canceBullet=true;
 }

本地存储

注：各浏览器支持的sessionStorage容量上限不同

window.localStorage本地存储，存储的数据没有过期时间

语法：myStorage=localStorage;返回一个Storage对象
添加：localStorage.setltem(‘key’,‘value’);
获取：localStorage.getltem(‘key’);
移除：localStorage.removeltem(‘key’);
清空：localStorage.clear();不接受参数，清空存储对象里的所有数据

window.localStorage会话存储，存储的数据会在浏览器会话结束时被清除(即浏览器关闭时)

语法：myStorage=sessionStorage;返回一个Storage对象
添加：sessionStorage.setltem(‘key’,‘value’);
获取：sessionStorage.getltem(‘key’);
移除：sessionStorage.removeltem(‘key’);
清空：sessionStorage.clear();不接受参数，清空存储对象里的所有数据

DOM0和DOM2

DOM0和DOM2区别?
1.DOM0同一个事件只能实现一次,DOM2同一个事件可以绑定多次
2.DOM0基本都冒泡,DOM2可以指定冒泡或捕获
3.不是所有的事件DOM0都支持,例如火狐的滚轮事件只能使用DOM2

DOM0

匿名函数 d.οnclick=function(){}
普通函数 οnclick=“ok()”

DOM2

补充：第三个参数true捕获 false冒泡 默认是false

IE

attachEvent(event,function)
detachEvent(event,function)

非IE

addEventListener(event,function,userCapture)

removeEventListener(event,function)

委托模式

委托模式:子级的事件交由父级实现，通过事件对象的target属性获取对应子级标签

<div>
    <p>1</p>
    <p>112</p>
    <p>123</p>
    <p>1234</p>
    <p>12356</p>
</div>

<script>
var d=document.getElementsByTagName('div')[0];
    d.onclick=function(e){
        console.log(e.target.innerHTML);
    }
</script>

滚轮事件

滚轮封装
实现：通过回调函数实现上滑下滑对应操作
el 需要绑定事件的元素
cb 回调函数 需要把上滑下滑的结果以参数的方式传回去
isCapture 是否捕获

FF

window.onmousewheel=function (e) {
        console.log(e.wheelDelta);
        // 如果>0下滑
        // 如果<0上滑
    }

非FF

window.addEventListener("DOMMouseScroll",function (e){
        console.log(e.detail);
        // 如果>0上滑
        // 如果<0下滑
    })

滚轮封装
实现：通过回调函数实现上滑下滑对应操作
el 需要绑定事件的元素
cb 回调函数 需要把上滑下滑的结果以参数的方式传回去
isCapture 是否捕获