js补充知识

一、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;
}