事件对象 event(e)
- 当DOM操作触发某个事件时，会产生事件对象event
当事件被触发时产生，事件执行完毕时销毁
- 事件对象 event 首先它是一个对象
包含着跟事件有关的所有信息
包括触发事件的DOM以及每种事件的一些特征
- 例如：鼠标事件 event 包含鼠标的坐标等
键盘事件 event 包含按下的键的信息
- 所有的事件 都必须被某个dom对象(dom元素)触发
- ele.onclick
当被点击标签的时候触发onclick事件
- window.onscroll
窗口事件当窗口的滚动条发生偏移是触发 onscroll事件
事件对象是 event
执行对象是 window
- 所有的事件不管是鼠标 键盘 窗口等，他们的事件对象都是event
//事件类型
//通过e.type获取被触发的事件类型
//点击事件
window.onclick = function(event){
//事件对象的兼容性写法
var e = event || window.event;
console.log(e.type); //PointerEvent
}
//鼠标移动事件
window.onmousemove = function(event){
//事件对象的兼容性写法
var e = event || window.event;
console.log(e.type); //MouseEvent
}
//滚动条事件
window.onscroll = function(event){
//事件对象的兼容性写法
var e = event || window.event;
console.log(e.type); //Event
}
//不同的事件其事件对象有不同的数据
//但是所有的事件对象都叫event
鼠标点击事件
- onclick 单击事件
- ondblclick 双击事件
当给同一个盒子，同时绑定单击和双击事件时，触发双击事件必定会触发两次单击事件
- oncontextmenu 右键事件
鼠标右键事件是有个默认功能的事件，它可以打开右键菜单
- onmousedown 鼠标按下事件
鼠标一旦按下就会触发，而onclick是鼠标按下再松开的时候才触发
- onmouseup 鼠标松开事件
当鼠标按下的时候不会触发，松开的时候才会触发
鼠标移动事件
- onmouseover 鼠标移入
- onmouseout 鼠标移出
- onmouseenter 鼠标移入
- onmouseleave 鼠标移出
两者不同点：
- 第一种（onmouseover、onmuseout）会触发事件冒泡
- 第二种（onmouseenter、onmouseleave）不会触发事件冒泡
-
给父级绑定了事件，子级没有绑定事件，但是当鼠标移入子级时，会触发父级的事件 ，这种情况叫做事件冒泡
鼠标坐标
- 鼠标的坐标在鼠标事件的事件对象中保存
- 所以要获取鼠标坐标，一般都是通过事件对象 event获取
- 所有的鼠标事件都可以通过事件对象来获取鼠标的坐标
- 但是通常我们在鼠标移动事件获取和使用鼠标坐标
获取鼠标坐标的几种方式
- 1、获取鼠标在窗口可视区中的坐标
e.clientX / e,clientY
- 2、获取鼠标在目标元素中的坐标
e.offsetX / e.offsetY
- 3、获取鼠标在文档中的坐标
e.pageX / e.pageY
- 4、获取鼠标在屏幕上的坐标
e.screenX / e.screenY
键盘事件
键盘事件类型
- 键盘按下 ： onkeydown
- 键盘抬起 ： onkeyup
document.onkeydown = function(event){
var e = event || window.event;
console.log("键盘按下");
//获取按下键的键码
var code = e.keyCode;
console.log(code);
/*
字母上面的数字 ： 48 ~ 57
字母 a ~ z ： 65 ~ 90
删除键 ： 8
回车键 ： 13
shift键 ： 16
左上右下 ： 37 ~ 40
w a s d {
w : 87
a : 65
s : 83
d : 68
}
空格键 ： 32
ctrl ： 17
alt ： 18
Esc ： 27
*/
}
表单事件
- onfocus 表单元素获取焦点时触发
- onblur 表单元素失去焦点时触发
- oninput 表单元素输入时触发
- onchange 表单元素里面的值发生改变且在失去焦点时触发
image对象
- 1、在html中创建img标签，用js获取
- 2、直接使用js创建img
- 3、使用Image构造函数来创建img
var img1 = document.createElement('img');
var img2 = new Image();
//设置宽高(不加单位)
img2.width = '400';
img2.height = '700';
img2.src = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.Zxtf2X2EddV-g7hKyBhilAHaQB?pid=ImgDet&rs=1';
//将img添加到fbox中
fbox.appendChild(img2);
图片预加载
页面中的缓存机制
- 当图片第一次打开的时候浏览器会将图片保存在本地中，则就将缓存
- 第二次打开的时候浏览器会将图片的src在缓存的图片中去找
- 如果找到就从本地打开，不会再发网络请求
- 如果找不到就发网络请求 缓存图片
图片加载原理
- 图片在将src写好之后开始加载，而不是渲染时才开始加载
图片预加载原理
- 根据缓存和图片加载的原理。因为图片在设置src的时候就可以进行请求
- 并将保存好的图片保存到本地中（缓存）
这个时候没有将图片渲染到页面中
图片就不会出现，但是可以正常缓存
- 等需要将图片渲染到页面上时，图片早就已经缓存好
加载就不会卡顿
图片的懒加载
//懒加载的封装
//封装懒加载
function lazyLoad(options){
//先生成一个在页面展示的img
var img1 = new Image();
//设置占位src
img1.src = options.jSrc;
img1.width = options.w;
img1.height = options.h;
//将img1渲染到页面中
options.fDiv.appendChild(img1);
//在生成一个img，用来加载真实的图片
var img2 = new Image();
img2.src = options.zSrc;
img2.onload = function(){
img1.src = this.src;
}
}
<div id="fbox"></div>
//调用懒加载方法
lazyLoad({
jSrc : "./img/loding.gif",//占位图片
//真实图片
zSrc : "https://tse4-mm.cn.bing.net/th/id/OIP-C.TyOpfduNwosmeMHNb4ZQ8QHaEo?pid=ImgDet&rs=1",
fDiv : fbox,
w : 800,
h : 600
});
网友评论