事件 : |
---|
1.移动事件 |
2.点击事件 |
3.覆盖时间 |
4.键盘事件 |
绑定事件:
on.xx绑定事件—句柄
- ele.onxxx = function(event){}
兼容性好,但是一个元素的同一个事件上只有一个
基本等同于写在Html行间上`在这里插入代码片- obj.addEnventListener(type,fn,false);【w3c标准的】【能给一个对象绑定一个事件的多个处理函数】
IE9以下不兼容,可以为一个事件绑定多个处理事件- obj.attachEvent(‘on’+type,fn)【ie9独用,能给一个对象绑定一个事件的多个处理函数,并且一个对象的一个事件绑定同一个函数多次他都能执行】
就是一个事件同样可以绑定多个处理程序- ele.onxxx = function(event){}
[程序this指向dom元素本身]
. obj.addEventListener(type,fn,false);[程序this指向dom元素本身]
- obj.attachEvent(‘on’,+type,fn);
[程序this指向window]
封装兼容性addEvent(elem,type,handle);方法:
//Eg-code:
Function addEvent(elem,type,handle){
If(elem.adddEventListener){
Elem. adddEventListener(type,handle,false);
}else if(elem.attachEvent){
Elem.attachEvent(‘on’+type,function(){
Handle.call(elem);
})
}else{
Elem[‘on’+type] =handle
}
}
}
解除事件处理程序
:
- ele.onclick = false/’’/null;
- ele.removeEventListener(type,fn,false);
- ele.detachEvent(‘on’+type,fn);
注:若绑定匿名函数,则无法解除
事件处理模型-事件冒泡(false)、捕获(true):
事件冒泡
:
- 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素(自底向上)
事件捕获: - 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自父元素捕获至子元素(事件源元素)(自顶向上)
IE,没有捕获事件
触发顺序,先捕获,后冒泡
Focus、blur、change、submit、reset、select等事件不冒泡
取消冒泡
:- w3c标准event.stopPropagation();但不支持ie9以下版本
- ie独有event.cancelBubble = true
- 封装取消冒泡的函数stopBubble(event)
Function stopBubble(event){
If(event.stopPropagation){
Event.stopPropagation();
}
else{
event.cancelBubble =true;
}
}
阻止默认事件
:
- 默认事件-表单提交,a标签跳转,右键菜单等
- Return false;以对象属性的方式注册的事件才生效
- Event.preventDefault();w3c标注,IE9以下不兼容
- Event.returnValue = false;兼容ie
- 封装阻止默认事件的函数cancelHandler(event);【
void(false):取消默认事件----==return false
】
Function cancelHandler (event){
If(e.preventDefault){
e.preventDefault();
} else{
e.returnValue = false;
}
}
事件对象
:
Envent ||window.event用于IE
事件源对象:
Event.target 火狐只有这个
Event.srcElement ie只有这个
这俩chrome都有
兼容写法
事件委托机智:【简便,效率高
】
//Eg-code:
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}