JS-----事件image对象

Posted 2021-03-19 leroywang

在触发DOM某个事件时，会产生一个事件对象，event    只在程序执行时才会存在，执行完毕就销毁。

event中包含所有与事件有关的信息  兼容问题 需要ie9以上才行

 var event=event||window.event;

鼠标事件

onclick(单击)   ondblclick(双击)  oncontextmenu(右键菜单)  onmousedown(按下) onmouseup(抬起)

onmouseover(移入)  onmouseout(移出)  onmouseenter(移入)  onmouseleave(移出) onmousemove(移动)

onmouseover()与onmouseenter()所能实现的功能和用法相同， 唯一的区别就是前者不支持事件冒泡。

onmouseout()与onmouseleave()所能实现的功能和用法相同， 唯一的区别就是前者不支持事件冒泡。

鼠标位置信息包含在鼠标事件的event中 单位是px

相对于屏幕的坐标位置    screenX  screenY

相对于视口的坐标位置     clientX   clientY

相对于body的坐标位置     pagX    pagY     ie下没有

键盘事件

onkeydown() 按下任意键盘按键的事件 

onkeyup() 释放案件的事件

onkeypress() 按下字符按键的事件

三个特殊键位 alt,ctrl,shift  使用时直接使用键名

事件捕获与事件冒泡

事件在网页中响应的顺序     捕获是由上向下 网景提出   冒泡是由下向上 ie 提出

事件绑定类型  

DOM0级  普通事件 给同一个元素绑定多个相同类型的事件前面的会被后面的覆盖

DOM2级  非ie addEventListener()    removeEventListener()

  　　　　IE attachEvent()    deatchEvent()

非IEDOM2级 

var box = document.getElementById("box"); box.removeEventListener("click",myFn,false);三个参数   元素/事件类型/响应事件的函数

阻止事件冒泡

不希望事件向上级元素传播时  有几个相同类型事件时

IE下在事件中编写代码： event.stopPropagation();

非IE下在事件中编写代码： window.event.cancelBubble = true;

阻止默认事件

兼容性问题

IE下在事件中编写代码： event.preventDefault();

非IE下在事件中编写代码： window.event.returnValue = false

 

 

image对象

创建image对象

var img=new Image();

image对象事件

onerror 在装载图像过程中发生错位时调用的句柄

onload 图像装载完毕时调用的事件句柄

图片预加载

提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

 

图片懒加载---图片延迟加载 

通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能。

 

 

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-src”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

 

滚动条偏移量

 

document.body.scrollTop

document.body.scrollLeft

兼容使用方式   var body_=document.documentElement||document.body

　　　　　　　var  a=body_.scrollTop;

window.onscroll  页面滚动事件

window.onresize 窗口大小

创建元素

append(‘div‘);　　支持插入文本类型 可插入n个标签

appendChild(‘div‘)　　不支持文本类型 智能插入一个标签

arguments   动态参数列表