js事件
一、什么是事件，事件的起因
btn.onclick = function(){
}
二、事件流
1》 事件冒泡：从内到外
2》 事件捕获：从外到内
三、鼠标类事件
1》 onclick ===è单击事件
2》ondbclick ==è双击事件
3》 oncontextmenu ===è右击事件
4》 onmouseover === >鼠标移入、穿过（一次）
5》 onmouseout=è鼠标移出
6》 onmousemove == >鼠标移入（一直会执行的代码）
7》 onmousedown === >鼠标按下
8》 onmouseup =è 鼠标释放
四、键盘类事件
1》 onkeydown ====è键盘按下
2》 onkeyup === 》键盘释放（松开）
********************属性：keyCode:得到键盘中的值
五、其他类事件
1. 》onload ====è加载（dom 加载事件）
2. 》onfocus === >得到焦点
3. 》onblue ===è失去焦点
4. 》onresize ==== >浏览器或者框架尺寸发生变化时触发的事件
5. 》onscroll ==è滚动条发送变化时触发
6. 》onchange ===== >发生变化时触发
六、事件处理程序===》添加
1》 html事件处理程序 ：
语法：把事件写到节点上
缺点：HTML和js耦合
2》 dom0级事件处理程序
语法：box.onclick = function(){}
缺点：同样一个事件后面的会覆盖前面的
3》 dom2级事件处理程序
语法：box.addEventListener(事件名称,函数,false|true)
参数1：不需要加on =èclick
参数3：false 代表冒泡，true 代表捕获
缺点：在ie8或者8以下中是不兼容的不支持
4》 ie事件处理程序
语法：box.attachEvent(事件名称,函数);
参数1：需要加on
5》 跨浏览器事件处理程序(兼容)
dom0级
dom2级
ie事件处理程序
//兼容事件
function setEvent(dom,evt,fn){
if(dom.addEventListener){
dom.addEventListener(evt,fn,false);//dom 2级事件处理程序
}else if(dom.attachEvent){
dom.attachEvent("on"+evt,fn);//ie 事件处理程序
}else{ //浏览器比较老以上都不支持
dom["on"+evt ]= fn //dom 0级事件处理程序
}
}
//测试
setEvent(box,"click",function(){alert(1)})
setEvent(box,"click",function(){alert(2)})
七、删除事件处理程序
dom 0级删除 ===》
语法：DOM对象.事件名称= null;
dom2级删除 ===》
语法：DOM对象.removeEventListener(事件名称,函数,false|true)
参数1:不需要加on
参数2：函数用同一个函数
ie删除
语法：DOM对象.detachEvent(事件名称,函数);
参数1：需要加on
参数2：函数用同一个函数
兼容处理
function removeEvent(dom,evt,fn){
if(dom.removeEventListener){
dom.removeEventListener(evt,fn,false);
}else if(box.detachEvent){
dom.detachEvent("on"+evt,fn)
}else{
dom["on"+evt] = null;
}
}
八、事件对象
非ie事件对象 === 》参数
ie中事件对象======》 window.event
跨浏览器事件对象，处理兼容 ====》window.event || e;
var evt = window.event || e ;
九、事件对象的属性
a) target （非ie）==è目标（返回对应的dom 节点）
b) srcElement(ie中)
处理兼容 ：事件对象.target || 事件对象.srcElement;
//兼容处理
var tar = e.target || e.srcElement;
c) clientX ==è返回当前鼠标位置距离流量器左侧距离
d) clientY ==è返回当前鼠标位置距离流量器顶部距离
****************注意：返回结果没有单位的
十、事件委托
原理：冒泡的原理
优点：
1、性能较好（提高）
2、即使后添加的也有效
十一、事件的阻止冒泡
语法：
事件对象.属性名称
非IE: e.stopPropagation() ;//非IE 阻止冒泡 谷歌、火狐都可以
IE: e.cancelBubble =true; // IE 阻止冒泡 谷歌可以火狐不行
兼容处理：
if(e.stopPropagation){
e.stopPropagation() ;
}else{
e.cancelBubble =true;
}
十二、事件的阻止默认行为
语法：
事件对象.属性名称
非ie : e.preventDefault();
ie : e.returnValue = false ;
兼容处理：
//兼容处理
if(e.preventDefault) {
e.preventDefault(); //非IE
}else {
e.returnValue = false ; //ie
}
js事件
一、什么是事件，事件的起因
btn.onclick = function(){
阅读背景：
Javascript学习笔记（13_1） --js事件
来源：互联网
分享到：
