JS事件
事件是可以被JavaScript侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述的信息
常见的事件
- 用户点击的页面上的某项内容
- 鼠标经过特定的元素
- 用户按下键盘上的某个按键
- 用户滚动或改变窗口大小
- 页面元素加载完成或加载失败
事件句柄
事件句柄（又称事件处理函数、事件监听函数），指用于响应某个事件而调用的函数。每一个事件对应一个句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句。
元素.addEventListener(‘事件’,函数)；
事件定义
DOM事件流
添加事件addEventListener（）
移除事件removeEventListener（）
IE事件流
IE8及以下
添加事件attachEven（）
移除事件detachEvent（）
IE事件流浏览器兼容
<body>
<button id="mybtn">点击我</button>
<script type="text/javascript">
//兼容所有浏览器
//addEventListener attachEvent
var EventUtil = {
addHandler:function(element,type,handler);{
//绑定事件
//chrom、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器 attachEvent
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element,attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
removeHandler:function(element,type,handler){
//绑定事件
//chrom、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器 detachEvent
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element,detachEvent){
element.datachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
}
}
</script>
</body>
事件周期
<body>
<div id="parent">
<div id="child" class="child">儿子事件</div>
</div>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script type="text/javascript">
//事件冒泡
// document.getElementById("parent").addEventListener("click",function(e){
// alert("parent事件触发"+this.id);
// })
// document.getElementById("child").addEventListener("click",function(e){
// alert("child事件触发"+this.id);
// })
//
//父 添加了事件
// 子 添加了事件
//
// 直系亲属树结构
// html
// body
// parent 添加了事件
// child 添加了事件
//
//事件冒泡：直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的元素凡是添加事件的，都会被触发
//
//事件捕获
//直系亲属结构
// html
// body
// parent 添加了事件
// child 添加了事件
//
// document.getElementById("parent").addEventListener("click",function(e){
// alert("parent事件触发"+this.id);
// },true)
// document.getElementById("child").addEventListener("click",function(e){
// alert("child事件触发"+this.id);
// },true)
//事件委托 （原理就是事件冒泡）
//保证只添加一次事件
var ul = document.getElementById("ul");
ul.addEventListener("click",function(event){
if(event.target.id == "one"){
alert(1);
}else if(event.target.id == "two"){
alert(2);
}else{
alert(3);
}
},false);
</script>
</body>
event对象
IE9及以上，firefox，chorm浏览器的event对象
点击儿子，事件在父亲上面
event.target 点击谁谁就是targrt，事件源
event.currentTarget 事件绑定在谁身上，就是指向谁
event.preventDefault（） 阻止默认行为
event.stopPropagation（） 取消事件捕获或者冒泡
event. clientY 、event. pageY 、event. screenY（客户端，页面，屏幕）
clientY 指浏览器顶部底边到鼠标的位置 （不包括滚动轴）
pageY 指浏览器页面顶部底边到鼠标的位置 （包括滚动轴）
screenY 指电脑屏幕顶部到鼠标位置 （与浏览器缩放无关）
IE8及以下的浏览器
event.type 事件类型
event.returnValue = false; 阻止默认行为同preventDefault
event.cancelBubble = true 取消事件冒泡同stopPropagation
srcElement 同target
event对象浏览器兼容
常见事件类型
兼容
<script type="text/javascript">
var EventUtil = {
addHandler:function(element,type,handler);{
//绑定事件
//chrom、firefox、IE9等 addEventListener
//IE8及IE8以下的浏览器 attachEvent
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element,attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
removeHandler:function(element,type,handler){
//绑定事件
//chrom、firefox、IE9等 removeEventListener
//IE8及IE8以下的浏览器 detachEvent
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element,detachEvent){
element.datachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
getTarget:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if (event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};
常用事件
//UI事件
//1、load事件 当页面完全加载后在window上面触发
// EventUtil.addHandler(window, "load", function(e){
// alert("Loaded!");
// });
//img标签加载完毕
// var image = document.createElement("img");
// EventUtil.addHandler(image, "load", function(e){
// alert("图片加载完毕");
// });
// image.src = "1.png";
//图片预加载
// var image = new Image();
// EventUtil.addHandler(image, "load", function(e){
// alert("Image loaded!");
// });
// image.src = "smile.gif";
//js动态加载完毕
// var script = document.createElement("script");
// EventUtil.addHandler(script, "load", function(event){
// alert("js Loaded");
// });
// script.src = "jquery.js";
// document.body.appendChild(script);
//相当于 <script src="jquery.js"><//script>
//css动态加载完毕
// var link = document.createElement("link");
// link.type = "text/css";
// link.rel = "stylesheet";
// EventUtil.addHandler(link, "load", function(event){
// alert("css loaded");
// });
// link.href = "example.css";
// document.getElemnetsByTagName("head")[0].appendChild(link);
//2、unload事件 用户从一个页面切换的另一个页面
//3、resize事件 窗口大小发生变化时触发
//4、scroll事件 主要针对新旧浏览器
//焦点事件
//1、 blur 元素失去焦点时触发
//2、 focus 不支持冒泡，元素获取焦点时触发
//3、 focusin 支持冒泡，元素获取焦点时触发，支持事件浏览器是IE5.5+，Safari5.1+，chrome等
//4、 focusout 同blur，元素失去焦点时触发，支持事件浏览器是IE5.5+，Safari5.1+，chrome等
//5、 DOMFocusIn 同focus，元素获取焦点时触发
//6、 DOMFocusOut 同blur，元素失去焦点时触发
//鼠标事件
//1、 click 单击事件
//2、dbclick 双击事件
//3、mousedown 鼠标按下时触发的事件
//4、mouseup 鼠标松开时触发的事件
//mousedown + mouseup = click
//mousenove 鼠标在元素内移动是执行
//mouseout 鼠标离开元素或其子元素的时候执行
//mouseover 鼠标进入元素或其子元素的时候执行
//mouseenter //只能进入目标元素才触发
//mouseleave //只能离开目标元素才触发
焦点事件
1、 blur 元素失去焦点时触发
2、 focus 不支持冒泡，元素获取焦点时触发
3、 focusin 支持冒泡，元素获取焦点时触发，支持事件浏览器是IE5.5+，Safari5.1+，chrome等
4、 focusout 同blur，元素失去焦点时触发，支持事件浏览器是IE5.5+，Safari5.1+，chrome等
5、 DOMFocusIn 同focus，元素获取焦点时触发
6、 DOMFocusOut 同blur，元素失去焦点时触发
鼠标事件
1、 click 单击事件
2、dbclick 双击事件
3、mousedown 鼠标按下时触发的事件
4、mouseup 鼠标松开时触发的事件
mousedown + mouseup = click
mousenove 鼠标在元素内移动是执行
mouseout 鼠标离开元素或其子元素的时候执行
mouseover 鼠标进入元素或其子元素的时候执行
mouseenter //只能进入目标元素才触发
mouseleave //只能离开目标元素才触发
keydown事件：按键被按下时触发，支持keyCode
任意按键皆可触发
keyup事件：按键被抬起时触发，支持keyCode
keypress事件：按键被按下时触发，支持charCode（字符码），keyCode（键码）不稳定
字符触发
textInput事件
DOMNodeInserted事件：添加被触发
DOMNodeRemoved事件：删除被触发
DOMNodeInsertedIntoDocument事件：添加之前被被触动
DOMNodeRemovedFromDocument事件：删除之前被触发
DOMSubtreeModified事件：任何变化都会被触发
DOMContentLoaded事件：在DOM树之后就触发，不理会图像、JavaScript文件、css文件或其他资源是否已经下载
DOMContentLoaded事件的速度一定快于laod事件
readystatechange事件：情绪化，限制IE，很难预料
hashchange事件
移动端事件类型
touchstart：手指触摸屏幕
touchmove：手指在屏幕上滑动
touchend：手指从屏幕上移开
**touchcancel：**当系统停止跟踪触摸时触发
多手指操作屏幕时