9.14 冯娜

学习日志

今天复习了上上周所学的知识点。学习了screen，event。

一、screen

​ 包含有关客户机显示屏幕的信息。

1、screen.width/height

返回显示屏幕的宽度与高度。

2、screen.availWidth/availHeight

去掉任务栏之后剩余的可用大小。

3、screen.availWidth

返回显示屏幕的宽度(除windows任务栏之外)。

4、screen.availHeight

返回显示屏幕的高度(除windows任务栏之外)。

5、screen.updateInterval

返回显示屏幕的刷新频率。

6、screen.colorDepth

返回显示屏幕的色深。

二、event

1、绑定：

（1）在HTML中，html:<any on事件名="函数(this)"

​ js:function 函数(any){...}

​ 问题：不符合内容与行为分离的要求，不便于维护。

（2）在js中动态绑定：

​ a、一个事件仅绑定一个处理函数：

​ elem.on事件名=function(){

     //this->elem
    }

​ 问题：一个事件只能绑定一个处理函数，不能被remove移除。

​ b、一个事件可绑定多个处理函数：

​ elem.addEventListener("事件名",fn);

​ elem.removeEventListener("事件名",fn)

2、事件模型：

（1）DOM：捕获、目标触发、冒泡三个阶段。

（2）IE8：没有捕获阶段，只有两个阶段。

3、事件对象：

（1）什么是事件对象：事件发生时自动创建；封装事件信息的；并提供操作事件的API的对象。

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

（3）操作：a、取消冒泡/停止蔓延
function(e){
e. stopPropagation();
}

​ b、利用冒泡：

​ 问题：浏览器触发事件，采用的是遍历所有事件监听对象的方式；如果事件监听越 多，遍历时间越长，响应事件就越慢。

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

​ 使用：如果多个平级子元素绑定相同的事件监听，则只需在父元素绑定一次，所有子 元素共用。

​ 2个难题：如何获得目标元素:e.target，不随冒泡而改变。

​ 如何筛选目标元素：元素名nodeName；选择器。

​ c、取消事件/阻止默认行为：e.preventDefault()；

​ 什么时候使用：阻止<a href="#xxx" 修改url；在表单的onsubmit事件结尾阻止表单 提交；用H5拖拽API，需要先禁用浏览器默认的拖拽行为。

​ d、事件坐标：相对于屏幕左上角：e.screenX/screenY。

​ 相对于文档显示区左上角：e.clientX/clientY。

​ 相对于触发事件原色的左上角：e.offsetX/offsetY。

4、页面滚动：

（1）事件：window.onscroll。

（2）获得页面滚动过的高度：document.body.scrollTop、document.documentElement.scrollTop。

（3）方法：window.scrollBy(left的增量，top的增量)、window.scrollTo(left,top)。