绑定事件处理函数
- ele.οnclick=function () {}
兼容性好,但一个元素的同一事件上只能绑定一个处理程序
基本等同于写在HTML行间
程序this指向是dom元素本身
- obj.addEventListener(type,listener,false);
- type:字符串,事件名称,比如“click”、“mouseover”、“keydown”等。
- listener:实现了 EventListener 接口或者是 JavaScript 中的函数。
- useCapture :是否使用捕捉,一般用 false(不捕获) 。
btn1Obj.addEventListener("click",method1,false);
IE9以下不兼容,可以为一个事件绑定多个处理程序,按照绑定顺序执行(先绑定先执行)。不能对同一个函数绑定多次执行多次。
程序this指向是dom元素本身
- obj.attachEvent(‘on’+type,fn);
- type:字符串,事件名称,比如“click”、“mouseover”、“keydown”等。
- fn:处理程序的函数
btn1Obj.attachEvent("onclick",method1);
IE独有,一个事件同样可以绑定多个处理程序,且对同一个函数绑定多次可以执行多次,(后绑定先执行)
程序this指向是window
解决浏览器兼容问题
function addEvent(elm.evType,fn,useCapture){
if(elm.addEventListener){
elm.addEventListener(evType,fn,false);
}
else if(elm.attachEvent){
elm.attachEvent('on'+evType,func(){
fn.call(elem);
});
}
else{
elm['on'+evType]=fn; //方括号表示法
}
}
解除事件处理程序
- ele.οnclick=false/’’/null
var div=document.getElementsByTagName('div')[0];
div.onclick=function(){
console.log('a');
this.onclick=null;
}
- ele.removeEventListener(type,fn,false)
//高度一致,对象要对应,事件类型对应,处理的那个函数要对应
div.addEventListener('click',test,false);
function test(){
console.log('a');
}
div.removeEventListener('click',test,false);
- ele.detachEvent(‘on’+type,fn)
- 若绑定匿名函数,则无法解除
事件处理模型
一个对象的一个事件类型只能处理一个事件模型,要么冒泡,要么捕获,
- 事件冒泡
结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素(自底而上)
把元素的最外面先抓住
- 事件捕获
结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(++事件源元素++)。(自顶而下)
IE没有捕获事件
- 触发顺序,先捕获,后冒泡
- 捕获冒泡,谁先绑定谁先执行
- focus,blus,change,submit,reset,select等事件不冒泡
阻止事件冒泡和阻止默认事件
-
取消冒泡
- event.stopPropagation():W3C标准,但不支持IE9以下版本
div.onclick=function(e){ e.stopPropagation(); this.style.backgroundColor="green"; }
- IE独有event.cancelBubble=true;
div.onclick=function(e){ //事件对象:在每一个事件处理函数里面可以写一个形参,系统传入事件对象,这个对象上有很多个属性,每一个属性都记载着这个事件发生时的关键性数据 e.canceBubble=true; this.style.backgroundColor="green"; }
- 封装取消冒泡的函数stopBubble(event);
div.onclick=function(e){ stopBubble(e); this.style.backgroundColor="green"; } function stopBubble(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }
-
阻止默认事件
- 默认事件——提交表单,a标签跳转,右键菜单等
//oncontextmenu:右键出菜单事件 documnt.oncontextmenu=function(){ console.log('a'); return false; }
- return false;以对象属性的方式注册的事件才生效(只对用句柄的绑定事件有效)
- event.preventDefault();W3C标注,ie9以下不兼容
documnt.oncontextmenu=function(e){ console.log('a'); e.preventDefault(); }
- event.returnValue=false;兼容IE
documnt.oncontextmenu=function(e){ console.log('a'); e.returnValue=false; }
- 封装阻止默认事件的函数:cancelHandler(event)
document.oncontextmenu=function(e){
console.log('a');
cancelHandler(e)
}
function cancelHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
a标签默认的跳转:
a.onclick=function(){
return false;
}
或者
<a href="javascript:void(0||false)">demo</a>
事件对象
- event||window.event用于IE
事件触发之后的事件对象
IE:window.event
非IE: event
-
事件源对象:(到底是谁触发的)
- event.target:火狐只有这个
- event.srcElement: IE只有这个
- 谷歌以上的都有
-
兼容性写法
obj.onclick=function(e){
var event=e||window.event;
var target=event.target||event.srcElement;
console.log(target);
}
事件委托
- 利用事件冒泡和事件源对象进行处理
- 优点:
- 性能 不需要循环所有的元素一个个绑定
- 灵活 当所有新的子元素时不需要重新绑定事件