事件绑定,event兼容各浏览器

var eventUtil={
//添加事件
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent(‘on‘+type,handler);
}else{
element[‘on‘+type]=handler;
}
},
//删除事件
removeHandler:function(element,type,handler){
if(element. removeEventListener){
element. removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent(‘on‘+type,handler);
}else{
element[‘on‘+type]=null;
}
},
//事件兼容
getEvent:function(event){
return event?event:window.event;
},
//事件类型
getType:function(event){
return event.type;
},
//触发事件目标
getElement:function(event){
return event.target||event.srcElement;
},
//阻止默认行为
preventDefauit:function(event){
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue=false; //false==阻止默认行为
}
},
//阻止事件冒泡
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;//true==阻止时间冒泡,false==不阻止冒泡
}
}
//下边是示例
// function show(){
// alert("哈哈")
// }
//eventUtil.addHandler(btn,"click",show);

};

时间: 2024-11-05 22:56:52

事件绑定,event兼容各浏览器的相关文章

JavaScript学习笔记(四)——js事件之事件绑定、兼容问题

事件捕获:事件从根节点开始,逐级到子节点,若节点绑定了事件动作,则执行动作,继续往下走. 事件冒泡:事件由子节点向跟节点派送,若节点绑定了事件动作,则执行动作,然后继续往上走. 一.怎么绑定事件和移除事件? 由于IE浏览器不支持事件捕获,只支持事件冒泡.因此,其他遵循标准的浏览器都使用W3C定义的函数绑定和移除,IE浏览器则自有一套执行规则.下面分别总结一下W3C和IE的绑定机制: 1.W3C下的事件绑定 添加事件 — addEventListener() 移除事件 — removeEventL

移动端和pc端事件绑定方式以及取消浏览器默认样式和取消冒泡

### 两种绑定方式 (DOM0)1.obj.onclick = fn; (DOM2)2. ie:obj.attachEvent(事件名称,事件函数); 1.没有捕获(非标准的ie 标准的ie底下有 ie6到10) 2.事件名称有on 3.事件函数执行的顺序:标准ie->正序 非标准ie->倒序 4.this指向window 标准:obj.addEventListener(事件名称,事件函数,是否捕获); 1.有捕获 2.事件名称没有on 3.事件执行的顺序是正序 4.this触发该事件的对象

JS的事件绑定、事件流模型

.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick/mouseover/mouseout2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发[注意

原生js事件绑定

一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup②keypress只能捕获数字,字母,符号键,而不能捕

兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>测试事件绑定函数</title> <scrip

焦点 、event对象、事件冒泡、事件绑定、AJAX知识点备忘

焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 设置焦点的几种方式: 1.点击 2.TAB键 3.JS onfocus   onblur 属性 var oinp=document.getElementById('shuru') oinp.onfocus=function(){ if(oinp.value=='请输入'){ oinp.value='' } } oinp.onblur=function(){ if(oinp.value==''){ oinp

js前端--解决非IE浏览器事件绑定的一些问题

一.问题所在 现代绑定中W3C使用的是:addEventListener和removeEventListener.IE使用的是attachEvent和detachEvent.我们知道IE的这两个问题多多,并且伴随内存泄漏.所以,解决这些问题非常有必要. 那么我们希望解决非IE浏览器事件绑定哪些问题呢? 1.支持同一元素的同一事件句柄可以绑定多个监听函数: 2.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略: 3.函数体内的this指向的应当是正在处理事件的节点

JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover--)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,

jQuery源码分析--event事件绑定(上)

上文提到,jquery的事件绑定有bind(),delegate()和one()以及live()方式.我用的jQuery2.1.3版本,live()已经被废弃了. bind(),delegate()和one()的内部源码. //7491行 bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, //7498行 delegate: function( selector, types, data,