eventUtil
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;
},
//阻止事件默认行为
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
window.onload=function(){
var go=document.getElementById('go'),
box=document.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('我是整个父盒子');
});
eventUtil.addHandler(go,'click',function(e){
//e=eventUtil.getEvent(e);
e=e || window.event;
alert(eventUtil.getElement(e).nodeName);
eventUtil.preventDefault(e);
eventUtil.stopPropagation(e);
});
}
eventUtil的更多相关文章
- 跨浏览器事件EventUtil
<div style="width: 150px; height: 150px; padding: 25px; border:1px solid blue; " id=&qu ...
- 跨浏览器的事件对象-------EventUtil 中的方法及用法
什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...
- EventUtil 根据IE自动适配事件
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { el ...
- JavaScript高级程序设计之EventUtil
简单的通用事件方法 var EventUtil = { getEvent: function (e) { return e || window.event; }, getTarget: functio ...
- 封装cookie.js、EventUtil.js、
最近学习了javascript,封装好的东西看起来舒服,以备需要的时候拉出来,jquery对javascript做了很好的封装!以后会多用jquery多些 var CookieUtil = { get ...
- EventUtil.addHandler方法
EventUtil.addHandler: addHandler 方法,职责是分别视情况而定来使用DOM0级方法.DOM2级方法或IE方法来添加事件. 这个方法属于一个名字叫EventUtil的对 ...
- 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...
- EventUtil——跨浏览器的事件对象
. 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...
- Javascript之浏览器兼容EventUtil
var EventUtil = { //添加事件处理程序 addHandler: function (element, type, handler) { if (element.addEventLis ...
随机推荐
- 数据库中 dbo是什么意思
亲当你在用sql 自动生成查询等sql 语句的时候 还记得 from 后边那一大串嘛 比如 [IWMS].[DBO].[CARTON] 一直我都对这个东西懵懵懂懂的 最近一直在学习存储过程,正好想起来 ...
- spring使用elasticsearch 5.x
elasticsearch客户端选择 这里使用transport建立elasticsearch客户端 applicationContext.xml配置,属性可以采用读取属性文件的方式.参考类Prope ...
- opencv的学习笔记2
继续昨晚的学习总结,昨晚看到轨迹条的创建就没有看下去了,今天继续: 1.轨迹条的创建: 轨迹条往往会和一个回调函数配合使用,当轨迹条发生改变,就调用这个轨迹条的回调函数 int createTrack ...
- Arduino示例教程超声波测距实验
超声波传感器 超声波是一种超出人类听觉极限的声波即其振动频率高于20 kHz的机械波.超声波传感器在工作的时候就是将电压和超声波之间的互相转换,当超声波传感器发射超声波时,发射超声波的探头将电压转化的 ...
- 网站禁止右键点击js
<script> function stop() { return false; } document.oncontextm ...
- Linux内核链表深度分析【转】
本文转载自:http://blog.csdn.net/coding__madman/article/details/51325646 链表简介: 链表是一种常用的数据结构,它通过指针将一系列数据节点连 ...
- Temporary ASP.NET 拒绝访问
CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\dd813f66 ...
- laravel框架总结(七) -- 数据库操作
1.使用DB门面进行基本操作 一旦你设置好了数据库连接,就可以使用 DB facade 来进行查找.DB facade 提供每个类型的查找方法:select.update.insert.delet ...
- CentOS 7下关于systemd的一些唠叨话二:systemd服务脚本的编写
CentOS 7继承了RHEL 7的新的特性,例如强大的systemd,而systemd的使用也使得以往系统服务的/etc/init.d的启动脚本的方式就此改变,也大幅提高了系统服务的运行效率.但服务 ...
- 【转】ini载入保存类,操作INI配置文件方便的很
/****************************************************************** * * ^_^ 恶猫 独门商标 挖哈哈 * * QQ:\> ...