JS常用事件兼容性处理方法
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>
转载于:https://blog.51cto.com/mupiao/1859124
JS常用事件兼容性处理方法相关推荐
- js常用事件整理—兼容所有浏览器
1.鼠标滚动事件. 说明:返回值 大于0向上滚动,小于0向下滚动. 兼容型:所有浏览器. 代码: /*********************** * 函数:鼠标滚动方向 * 参数:event * 返 ...
- IE7.JS解决IE兼容性问题方法
转自:http://code.google.com/p/ie7-js/ 使IE5,IE6兼容到IE7模式(推荐) <!--[if lt IE 7]> <script src=&quo ...
- js 常用数组操作的方法
1. concat 数组拼接 // 用于连接两个或者多个字符串,无法改变原字符串,返回两个或者多个连接后生成的新字符串代码如下:let str = 'hello';let str2 = 'word'; ...
- Ajax--概述、xhr对象的常用属性和方法、xhr的常用事件、xhr对象发送POST请求、xhr对象发送GET请求、xhr对象的兼容性问题、数据交换格式(XML、JSON)
一.概述 1.1 发展历程 在开始之前先来看一下Ajax的工作原理吧,如下图所示: Ajax全称Asynchronous javascript and xml(异步 JavaScript 和 XML) ...
- Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面...
Atitit.跨语言 java c#.net php js常用的codec encode算法api 兼容性 应该内置到语言里面 1. 常用算法1 1.1. 目录2 1.2. 定义和用法编辑2 1.3 ...
- JS常用属性方法大全
JS常用属性方法大全 1.输出语句:document.write(""); 2.JS中的注释为: 3.传统的HTML文档顺序是:document->html->(hea ...
- 在原生js中的事件监听方法
一.传统事件绑定方法 我们在学习的时候,最初接触的事件绑定方式大多是传统事件绑定方法.传统事件绑定方法事例如下: window.οnlοad=function(){alert("页面已加载& ...
- HTML学习14-js 内置对象 Date() 常用的日期的方法 定时器 倒计时 监听事件
内置对象 内置对象: 内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能. 手机买来就能发短信 就能打电话 日期函数 ( Date() ) 这个函数 ( ...
- 数组和字符串的方法以及常用事件、函数this
数组的方法 push 作用: 向数组的末尾增加一个成员 返回值: 数组的长度 注:会改变原数组 // 定义数组 var arr = ["张三", "李四", & ...
- 第60天:js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
最新文章
- wi7家庭版安装 sqlserver2008
- centos 安装 MatConvNet (gpu)
- linux如何运行verilog,linux系统下ncverilog的详细命令linux系统下ncverilog的详细命令.doc...
- C# GDI+ 生成自定义进度条
- RS-232、RS-422与RS-485标准
- 制定Windows重要安全计划——12步纲要
- mysql开启url重写_开启URL伪静态的方法
- psd缩略图上传控件
- 好的编码习惯是一场代码驱邪仪式
- 自己实现一个Starter
- 要么忙于生存,要么忙于去死
- Gitlab与Jenkins构建CICD环境
- 【python报错总结】pandas打开Excel文件失败
- Transformer课程 第8课NER案例代码笔记-IOB标记
- PE框架学习之道:PE框架——template,command,chain
- 一次由图片引起的致命崩溃问题
- JavaScript设计模式总汇
- Android多人视频聊天应用的开发(一)快速集成
- CleanMyMac X是干嘛的?及最新版功能介绍
- 华为鸿蒙系统怎么退出,鸿蒙系统准备就绪,华为将退出安卓联盟,进度能赶超安卓吗?...
热门文章
- 磁盘剩余空间策略_Linux性能监控常用的命令:监控磁盘使用情况-df命令
- linux ab 命令参数,linux环境中ab命令简介及结果分析
- Oracle的sql条件带有,oraclesql语句的if
- linux系统rc路由配置_Linux下路由配置梳理
- vscode web版搭建_VS Code 1.40 发布!可自行搭建 Web 版 VS Code!
- 动态代理的两种方式_一文帮你掌握Java中的动态代理
- oracle如何修改字段为空的为0,Oracle中字段为空处理成0
- 有趣的Windows之mysql的zip安装及配置
- 2.10 环境变量PATH 2.11 cp命令 2.12 mv命令 2.13 文档查看cat/mor
- HTML学习基础教程