每日一结(10.31)

1.懒加载

- 懒加载的应用场景：在一些电商类平台网站上由于页面要加载的数据量较庞大，因此如果直接将页面所有内容都加载出来，会导致页面的加载时间过长，导致页面白屏。

因此，开发者们想出了懒加载的办法——只加载用户看得见的部分，看不见的部分不加载。这样单次加载的内容就相对较少，加载时间减短，从而提升用户体验。

- 懒加载实现思路：

- 第一步：先渲染图片结构，把图片资源先暂时给img的src1属性

- 第二步：显示第一屏效果，只要图片的位置小于窗口可视高度就显示出来

- 只加载可视区域内的照片

- 窗口的可视高度 document.documentElement.clientHeight

- 图片在页面中的位置图片.offsetTop

- 默认情况所有的图片都不显示先将图片路径给自定义属性src1 如果要显示该图片将src1给src

- 第三步：当滚动滚动的时候，再次判断图片是否在可视范围内容

- 判断范围：页面的可视高度+页面卷起的高度 document.documentElement.scrollTop + document.documentElement.clientHeight

2.事件对象

事件对象：每一个事件都会有一个对象，这个对象用来记录和该事件有关的一些信息

如何获取事件对象

- 标准浏览器和IE浏览器：window.event

- 低版本火狐浏览器：火狐低版本浏览器在事件处理函数中的第一个参数就是事件对象

- 兼容事件对象

- window.event || 第一个参数

事件对象中的属性

1. altKey/shiftKey/ctrlKey:表示在执行事件的时候，是否同时按住alt shift ctrl键，执行的时候按住是返回true，否则返回false

2. clientX/clientY：表示鼠标都可视窗口左侧和上侧的距离

3. pageX/pageY:表示鼠标位置到页面左侧和上侧的距离，==存在IE兼容问题==

- pageX = clientX + 页面卷起的宽度

- pageY = clientY + 页面卷起的高度

- 在IE低版本去获取pageX和pageY，因为在IE版本没有办法获取Pagex和pageY，所以我们可以用卷起的高度+clientx

4.target:目标源/事件源，事件触发事件的元素，==存在IE兼容问题==

- 标准浏览器：事件对象.target

- IE低版本：事件对象.srcElement

- type：添加事件的类型，没有on

3.事件绑定

1.之前绑定事件

- 语法：标签.事件类型 = function(){}

- 缺点：同种事件类型一次只能绑定一个，后者会覆盖前者

2.事件绑定

基础语法

- 标准浏览器:标签.addEventListener(事件类型(不加on),事件处理函数,事件捕获)

- IE低版本浏览器:标签.attachEvent(事件类型(加on),事件处理函数)

3.两者区别

- 面试题：addEventListener和attachEvent事件绑定有什么区别?

- addEventListener 事件类型不加on，有事件捕获，执行顺序从前往后执行

- attachEvent 事件类型加on 没有事件捕获执行顺序从后往前执行

4.浏览器兼容

- 事件绑定浏览器兼容 if(判断某个方法是否存在){}else{}

5.事件绑定函数封装

elem：绑定事件的标签 type：事件类型 fun：事件处理函数

4.事件取消

1.之前的事件取消

- 标签.事件类型 = null

2.事件取消

基础语法

- 标准浏览器:标签.removeEventListener(事件类型(不加on),事件处理函数,是否捕获)

- IE低版本:标签.detachEvent(事件类型(加on),事件处理函数)

3.浏览器兼容

/ 浏览器兼容事件取消

if (btn.removeEventListener) {

btn.removeEventListener("click", fun1)

} else {

btn.detachEvent("onclick", fun1);

}

4.事件取消函数封装

function unbind(elem, type, fun) {

if (elem.removeEventListener) {

elem.removeEventListener(type, fun)

} else {

elem.detachEvent("on" + type, fun);

}

5.事件流

- 事件流：当事件发生的时候，事件在字符节点之间的固定传递顺序

- 捕获型事件(标准) 冒泡性事件

事件流会经历三个阶段

- 捕获阶段：当事件发生的时候事件从window开始往子元素传递

- 确定目标：确定真正触发事件的元素

- 冒泡阶段：目标源接受到事件之后开始处理事件，处理完成之后，会将事件从当前往父节点传递直到window

绑定事件 addEventListener(事件类型,事件处理函数,是否事件捕获) true事件捕获 false事件冒泡默认是false

6.阻止事件冒泡

- 标准浏览器事件对象.stopPropagation()

- IE低版本事件对象.cancelBubble = true

- 阻止事件冒泡兼容

- ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true

7.阻止默认行为

有很多标签都是有默认行为的，例如：a标签的跳转、右键菜单、图片拖拽保存等等

- return false; ==只适用用绑定方式是:标签.事件类型=function(){}==

- 标准浏览器：事件对象.preventDefault()

- IE低版本：事件对象.returnValue = false;

- 阻止事件默认行为兼容

- ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;

8.事件委托

- 在我们需要添加大量事件的时候，为了节省性能，我们一般会用到事件委托(事件代理)

实现场景：我们现在有10000个li标签，要给给每个li标签都添加点击事件，如果用for循环添加需要执行的时间比较长，会浪费计算机性能此时我们推荐用事件委托

事件委托实现的思路

- 给所有要添加事件元素的父元素添加事件

- 在父元素执行的时候，找到目标源执行操作

每日一结(10.31)相关推荐

每日一结(10.25)
一.sort排序方法 1.基础用法: sort() 不传参根据ASCII编码进行排序的 "0"-48 代码: var newArr = arr.sort(); console.l ...
每日一结(10.19)
1.函数 1.1函数返回值什么时候需要函数返回值函数外想要使用函数内部的变量的时候语法:return 返回值注意事项函数中ret ...
御剑情缘服务器维护,御剑情缘10月31日安卓区部分服务器数据互通公告 10.31合服名称与时间[图]...
类型:角色扮演大小:611.52MB 评分:10 平台: 御剑情缘在10月31日安卓区部分服务器进行数据互通,也就是合服拉,下面小编带来了10.31合服名称与时间! 御剑情缘10月31日安卓区部分服 ...
Interview：算法岗位面试—10.31下午上海某银行总部公司(二面，四大行之一)之项目简介、比赛介绍、某个比赛的过程
Interview:算法岗位面试-10.31下午上海某银行总部公司(二面,四大行之一)之项目简介.比赛介绍.某个比赛的过程导读:明天还有事,更多详细内容后期再更新哈目录项目简介.比赛介绍.某个比 ...
火星人敏捷开发手册原10.31版本已于10.14提前发布，特此通知
因为月底较忙,而中间培训又需要,已经抽上半月时间完成发布:怕今天有人上来查找无果,特此通知,见谅. 发布通知帖位于:火星人敏捷开发手册 2011-10-14 发布主贴位于:[置顶][正式发布]火星人 ...
Contest - 2014 SWJTU ACM 手速测试赛（2014.10.31）
题目列表: 2146 Problem A [手速]阔绰的Dim 2147 Problem B [手速]颓废的Dim 2148 Problem C [手速]我的滑板鞋 2149 Problem D [手 ...
训练日志 2018.10.31
上周把图的连通性看完了,也做了些有关的题. 图的遍历内容的欧拉回路 Fleury 算法还不太熟练,哈密尔顿回路还没开始,这周争取把图的遍历以及拓扑排序看完,再做些题. 2018.10.31
2017.10.31笔记
10.31笔记 1.js数据类型: ①基本数据类型:第一个:number 数字类型 NAN 非数类型第二个:string 字符串,两个引号之间的内容第三个:boolean 布尔值( true fa ...
QT学习-10/31/2012
http://blog.csdn.net/jackie_lee2011qh/article/details/7397641 虽然上述文章的目的是去除控制窗口,但是它的相反的操作就是添加控制窗口. ht ...

每日一结(10.31)

每日一结(10.31)相关推荐

最新文章

热门文章