标签：顺序 常用 def onscroll 信息 页面 原理 创建 图像
在触发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 动态参数列表
标签：顺序 常用 def onscroll 信息 页面 原理 创建 图像
原文地址：https://www.cnblogs.com/leroywang/p/12109572.html
