一、JS的事件对象 - event
1）概念
- event就是当前事件的对象，简称事件对象
-
只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。
event 常见属性.png
2）pageX / pageY、screenX / screenY、clientX / clientY的区别
- 1）screenX和screenY 是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸
- 2）pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;
- 3）clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。
3）防止拖动时选中内容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
二、严格模式和怪异模式
1）概念
- 早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)
- 但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式)
2）使用
- document.compatMode
- 值为BackCompat，则是怪异模式
- 值为CSS1Compat，则为严格模式
三、onresize
1）概念
- 当窗口或框架的大小发生改变的时候就会调用
- onresize一般被运用于自适应页面布局等多屏幕适配场景
四、JS事件传递机制
1）冒泡机制
- 气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。
-
相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点
图示.png - 冒泡顺序：div -> body -> html -> document -> window
- 不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload
2）阻止冒泡的方法
1）标准浏览器 和 ie浏览器
- w3c：event.stopPropagation() proPagation 传播 传递
- IE：event.cancelBubble = true bubble 冒泡 cancel 取消
2）兼容的写法
if(event && event.stopPropagation){ // w3c标准
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
