BOM

 

 

window:

打开和关闭窗口：window.open(...)/close()

打开超链接的方式：4种

1.替换当前窗口，可后退

html: <a href="" target="_self"></a>

js:      window.open("url","_self")

2.在新窗口打开，只能打开一个

html:<a href="url" target="name"></a>

js:     window.open("url","name")

原理：每个窗口都有一个name属性

           name属性是内存中唯一标识窗口，相同name属性的窗口只能开一个，后开的会替换先开的

预定义name属性：_self  自动获取当前窗口的name

                            _blank 随机生成name

窗口大小和窗口位置

1.完整大小：outerWidth/outerHeight

2.文档显示区大小：innerWidth/innerHeight

 

location:封装当前窗口正在打开的url

location.assign("url")在当前窗口打开新url

location.href="url"

location.replace("url")在当前窗口打开新url,禁止后退

 

navigator:封装浏览器配置信息的对象————没有标准

.cookieEnabled 判断是否启用了cookie

screen:获得显示设备的分辨率

screen.width    screen.height

screen.availwidth   screen.availheight  去掉任务栏之后剩余分辨率

event:

什么是事件：浏览器自动触发的或用户手动触发的页面状态

如何绑定：

1.在HTML中绑定事件<ANY on 事件名=“js语句”>

例：<button onclick="fun()">

问题：不符合内容与行为分离的原则，不便于维护

2.在JS中动态绑定事件

<ANY.on事件名=fun;

强调：fun后不要加(),因为是回调的一种

问题：一个事件只能绑定一个处理函数

3.addEventListener

ANY.addEventListener("事件名",fun,?)

ANY.removeEventListener("事件名",fun)

1.事件模型：

DOM：3个阶段

1.捕获：由外向内，记录各级父元素上绑定的相同事件，addEventListener("事件",fn,capture)

                                                                              capture是否在捕获阶段提前触发，默认false

2.目标阶段：首选触发目标元素上的事件处理函数，目标元素：实际触发事件的元素

3.冒泡：按照捕获顺序的反向，由内向外，依次触发各级父元素绑定的事件处理函数

    IE8:2个阶段：没有捕获

 

 

2.事件对象：当事件发生时，自动创建的，封装所有事件信息的对象

获取：事件对象默认作为事件处理函数的第一个参数传入

function 处理函数(e){

  e//在事件发生时自动获得事件对象

}

操作：取消冒泡：e.stopPropagation()

利用冒泡：

优化：尽量少的添加事件监听

为什么：浏览器在事件发生时，会遍历所有注册的事件监听，监听越多，遍历就越慢，网页响应就越慢

解决：如果多个子元素绑定相同的事件时，只需要在父元素集中绑定一次，所有子元素共用即可。

难题：1.如何获得目标元素

this-->随着冒泡向父元素移动

解决：e.target始终保存目标元素不随冒泡改变

2.如何鉴别目标元素是否想要的

在执行正式操作前，判断目标元素的特征

取消事件：阻止默认行为

何时：当事件发生后，不希望事件再执行浏览器默认行为时

e.preventDefault();

典型应用：

1.当用a元素作为按钮使用时，避免URL结尾添加锚点地址，要取消默认行为

2.在表单的onsubmit事件中，进行最后一次完整验证，如果未通过，就取消提交

3.H5做拖拽效果时，都要取消默认行为

 

事件发生时，鼠标的位置

相对于屏幕左上角：e.screenX | e.screenY

相对于文档显示区：e.clientX | e.clientY

相对于事件绑定的元素：e.offsetX | e.offsetY

 

页面滚动

事件：window.onscroll

获得页面滚动过的高度：document.body.scrollTop||document.documentElement.scrollTop