JS常用事件兼容性处理方法
来源:互联网 发布:python员工管理系统 编辑:程序博客网 时间:2024/06/10 03:06
event.js文件
//跨浏览器事件处理程序【根据能力检测调用】
var EventObject = {
//添加事件
AddEvent:function(obj , type , eventFn){
if(obj.addEventListener){//常用
obj.addEventListener(type , eventFn , false);
}
else if(obj.attachEvent){//IE8及以下
obj.attachEvent('on'+type , eventFn);
}
else{//DOM零级事件处理
obj['on'+type] = eventFn; //obj.onclick === obj['onclick']
}
},
//删除事件
DelEvent:function(obj , type , eventFn){
if(obj.removeEventListener){
obj.removeEventListener(type , eventFn , false);
}
else if(obj.detachEvent){
obj.detachEvent('on'+type , eventFn);
}
else{
obj['on'+type] = null;
}
},
//获取事件对象
GegEvent:function(event){
return event ? event : window.event;
},
//获取事件类型
GetType:function(event){
return event.type;
},
//获取事件目标
GetTarget:function(event){
return event.target || event.srcElement;
},
//阻止事件默认行为
PreventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue = false; //IE8及以下的版本
}
},
//阻止事件冒泡
StopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true; //IE8及以下的版本
}
}
};
index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件对象封装调用</title>
<style type="text/css">
div{border: 1px solid red; padding: 20px;}
</style>
</head>
<body>
<div id="divBox">
<input type="button" name="btn1" id="btn1" value="通用跨浏览器点击事件" />
<input type="button" name="btn2" id="btn2" value="事件类型type" />
<input type="button" name="btn3" id="btn3" value="事件目标target" />
<input type="button" name="btn4" id="btn4" value="元素节点名称target.nodeName" />
<input type="button" name="btn5" id="btn5" value="阻止事件冒泡stopPropagation()" />
<a href="http://www.baidu.com" id="go">打开百度 阻止默认行为preventDefault()</a>
</div>
</body>
<script src="event.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var Box = document.getElementById("divBox");
EventObject.AddEvent(Box , "click" , mupiao);
function mupiao(){
alert("我是装按扭的DIV")
}
var btn1 = document.getElementById("btn1");
EventObject.AddEvent(btn1 , "click" , mupiao1); //添加事件方法
function mupiao1(){
alert("我调用了封装的事件对象方法!");
}
//EventObject.DelEvent(btn1 , "click" , mupiao); //删除事件方法
var btn2 = document.getElementById("btn2");
EventObject.AddEvent(btn2 , "click" , mupiao2);
function mupiao2(event){
alert(event.type); //事件类型(它是event的属性)
}
var btn3 = document.getElementById("btn3");
EventObject.AddEvent(btn3 , "click" , mupiao3);
function mupiao3(event){
var event = event || window.event;
var ele = event.target || event.srcElement;
alert(ele);//事件目标(它是event的属性)
ele.style.background = "red"
}
var btn4 = document.getElementById("btn4");
EventObject.AddEvent(btn4 , "click" , mupiao4);
function mupiao4(event){
var e = EventObject.GegEvent(event);
var ele = EventObject.GetTarget(e);
alert(ele.nodeName);//元素节点名称(它是event的属性)
}
var btn5 = document.getElementById("btn5");
EventObject.AddEvent(btn5 , "click" , mupiao5);
function mupiao5(event){
event.stopPropagation(); //阻止事件冒泡
alert("阻止事件冒泡stopPropagation()");//元素节点名称(它是event的方法)
}
var go = document.getElementById("go");
EventObject.AddEvent(go , "click" , goFn);
function goFn(event){
EventObject.PreventDefault(event);
EventObject.StopPropagation(event);
alert("阻止默认行为preventDefault()");//元素节点名称(它是event的方法)
}
</script>
</html>
- JS常用事件兼容性处理方法
- touch事件兼容性处理
- js 事件机制兼容性
- JS常用事件处理程序
- JS浏览器兼容性处理
- js常用方法和事件
- 常用原生JS方法总结(兼容性写法)
- 常用原生JS方法总结(兼容性写法)
- 常用原生JS方法总结(兼容性写法)
- JS实现面板拖动及兼容性处理方法
- JS事件(Event)兼容性探究
- 优化js中的兼容性处理
- 原生JS绑定事件的兼容性写法与绑定事件的几种方法
- webP兼容性前端处理方法
- JS 之document常用方法属性事件
- js小笔记 事件常用方法
- 使用prototype.js的事件处理方法
- js事件处理方法addEventListener和attachEvent
- 第七周--项目1-建立顺序环形队列算法库
- 计算机网络CRC校验
- Java之内存分析和String对象
- 自定义控件
- express 学习笔记(五)form
- JS常用事件兼容性处理方法
- HDU1754 - 线段树 Water~
- Python:反射
- 一步一步实现自定义控件(三)
- C++继承的三种方式,私有、公有、保护。
- Codeforces Round #372 (Div. 2) C 构造
- 新世纪的球王:里奥·梅西
- 第5章 路由事件(4)——附加路由事件
- RecyclerView仿ListView下拉刷新