BOM 、事件、物体位移以及this问题

一，BOM（浏览器window对象的几个属性对象）

    1.window.navigator.userAgent   //可以判断浏览器类型和版本号

    2.window.history  //浏览器历史记录信息

        1）window.history.go()  //到第几个页面，参数可正负

        2）window.history.forward(); // 相当于浏览器的前进按钮

        3）window.history.back(); //相当于浏览器的后退按钮

    3.window.location  //浏览器的地址栏信息

         1）window.location.href // 和location的信息一样是连接的信息

         2）window.location.search //？及其后面的串

         3）window.location.hash    //#及后面的串

         4）window.location.protocal //协议

         5）window.location.hostname //域名

         6）window.location.port  //端口

         7）window.location.path // 路径

     4.window.open(url,打开方式)

            打开方式：_blank 新的标签

                           ：_self 当前

                           ：about:blank 空页面

            直接打开chrome 和 FF会拦截，IE可以打开

     5.window.close()，只能关闭通过window.open()方法打开的窗口

二，事件对象

1,目前接触到的一些事件

1）鼠标事件

**onclick，鼠标左键点击

**ondoubleclick,双击

**oncontextmenu，鼠标右键单击菜单

**onmousedown，鼠标按下

**onmousemove,鼠标移动&

**onmouseup，鼠标抬起&

**onmouseover，鼠标经过&，有&的三个事件配合可以模拟h5drag的效果，实现低版本的拖拽

**onmousewheel，鼠标滚轮事件，兼容ie和chrome，火狐需要绑定DOM3级事件DOMMouseScroll，在javascript常用函数里面有写。

2）表单事件

**onchange，表单元素改变，input textarea select等

**oninput，表单输入实时监控，适合高版本浏览器，低版本用onpropertychange，ie9用onfocus和setinterval配合实现，也在javascript常用函数中有写。

**onfocus，表单元素获取到焦点，obj.focus 强制获取焦点

**onblur，表单元素失去焦点，obj.blur 强制失去焦点

**onsubmit，提交按钮提交事件

3）img

**onload,图片加载成功后，预加载时候用

**onerror，图片加载出错

4）window

**onload，浏览器资源都加载完成

**onresize，窗口重新调整大小

**onscroll，窗口滚动

5）document

**domReady，是一个自定义的函数，事件是DOMContentLoaded（高级版本），onreadystatechange并且document.readyState=“complete”的情况下（低版本）,也在javascript常用小函数中有写。

6）键盘事件

**onkeydown,按下键盘的某个按钮

**onkeyup ， 抬起某个按钮

2.事件冒泡（子级元素事件向父级传递，如果父级定义了该类事件就触发，反之向上级父级传递）

3.事件委托

可以利用事件冒泡特性做事件代理，比如多个li标记要绑定事件时候可以将事件绑定到父级的ul，判断事件target是否是li，再做处理函数。可以节省性能，还可以给未来的元素加事件。

4.事件捕获（和冒泡是相反的过程）

事件流的方向是捕获（顶级-父级-子级）--> 目标（就是target或者srcElement）-->冒泡（目标--父级--顶级），

addEventListener绑定时候的第三个参数如果是false，表示冒泡，如果是true表示捕获，一般设为false。

5.事件对象常用的几个属性

var oEvent = ev || event； ev是指事件处理函数的参数，event是指window.event对象，此处是做兼容处理

1）oEvent.clientX  /  oEvent.clientY,表示鼠标在浏览器窗口中的坐标位置。

2）oEvent.keyCode / oEvent.ctrKey / oEvent.altKey /oEvent.shiftKey ,表示键盘事件的键值。

3）oEvent.target || oEvent.srcElement ，事件的源，也就是目标元素，兼容写法

4）oEvent.cancelBubble = true, 取消冒泡事件。IE9以前的不支持stopPropagation（），高版本支持

5）oEvent.preventDefault（），阻止浏览器默认行为，addEventListener里面用此方法，其他时候也可以用return false来阻止，ie的还有obj.setCapture（），释放是obj.releaseCapture（）。

6）var target=3）中获得的值，然后target.tagName，表示目标源的标签名是什么（大写的字母如：LI）

7）滚轮事件里面的ev.wheelDelta（ie和chrome）和ev.detail（FF）兼容写，表示滚轮的方向值，前一个向下是负值，向上是正直，后者是相反的，还有safari中苹果鼠标的滚轮事件好像不太一样。

三，物体移动或拖拽的信息，

一般会根据物体（块儿元素）的offsetTop（定位顶部）offsetLeft（定位左边）oEvent.clientX（鼠标位置X轴）oEvent.clientY（鼠标位置Y轴）坐标这些已知的变量，通过画图等价转换等求得位置的距离，然后赋值达到移动和拖拽的效果。javascript常用函数中有个别写了。

obj.offsetParent（） 表示obj的定位父级

obj.offsetHeight()表示obj的高度（盒子）

obj.scrollHeight() 表示obj的内容高度     

//宽度同高度类似

四，this问题出现的情况

1）定时器里面的this，一般是window对象（浏览器环境下）

2）两层函数，闭包等

3）事件绑定时事件处理函数中