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)。

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1