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的更多相关文章

  1. 跨浏览器事件EventUtil

    <div style="width: 150px; height: 150px; padding: 25px; border:1px solid blue; " id=&qu ...

  2. 跨浏览器的事件对象-------EventUtil 中的方法及用法

    什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...

  3. EventUtil 根据IE自动适配事件

    var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { el ...

  4. JavaScript高级程序设计之EventUtil

    简单的通用事件方法 var EventUtil = { getEvent: function (e) { return e || window.event; }, getTarget: functio ...

  5. 封装cookie.js、EventUtil.js、

    最近学习了javascript,封装好的东西看起来舒服,以备需要的时候拉出来,jquery对javascript做了很好的封装!以后会多用jquery多些 var CookieUtil = { get ...

  6. EventUtil.addHandler方法

    EventUtil.addHandler: addHandler 方法,职责是分别视情况而定来使用DOM0级方法.DOM2级方法或IE方法来添加事件.   这个方法属于一个名字叫EventUtil的对 ...

  7. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...

  8. EventUtil——跨浏览器的事件对象

    . 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...

  9. Javascript之浏览器兼容EventUtil

    var EventUtil = { //添加事件处理程序 addHandler: function (element, type, handler) { if (element.addEventLis ...

随机推荐

  1. 数据库中 dbo是什么意思

    亲当你在用sql 自动生成查询等sql 语句的时候 还记得 from 后边那一大串嘛 比如 [IWMS].[DBO].[CARTON] 一直我都对这个东西懵懵懂懂的 最近一直在学习存储过程,正好想起来 ...

  2. spring使用elasticsearch 5.x

    elasticsearch客户端选择 这里使用transport建立elasticsearch客户端 applicationContext.xml配置,属性可以采用读取属性文件的方式.参考类Prope ...

  3. opencv的学习笔记2

    继续昨晚的学习总结,昨晚看到轨迹条的创建就没有看下去了,今天继续: 1.轨迹条的创建: 轨迹条往往会和一个回调函数配合使用,当轨迹条发生改变,就调用这个轨迹条的回调函数 int createTrack ...

  4. Arduino示例教程超声波测距实验

    超声波传感器 超声波是一种超出人类听觉极限的声波即其振动频率高于20 kHz的机械波.超声波传感器在工作的时候就是将电压和超声波之间的互相转换,当超声波传感器发射超声波时,发射超声波的探头将电压转化的 ...

  5. 网站禁止右键点击js

    <script>        function stop() {            return false;        }        document.oncontextm ...

  6. Linux内核链表深度分析【转】

    本文转载自:http://blog.csdn.net/coding__madman/article/details/51325646 链表简介: 链表是一种常用的数据结构,它通过指针将一系列数据节点连 ...

  7. Temporary ASP.NET 拒绝访问

    CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\dd813f66 ...

  8. laravel框架总结(七) -- 数据库操作

      1.使用DB门面进行基本操作 一旦你设置好了数据库连接,就可以使用 DB facade 来进行查找.DB facade 提供每个类型的查找方法:select.update.insert.delet ...

  9. CentOS 7下关于systemd的一些唠叨话二:systemd服务脚本的编写

    CentOS 7继承了RHEL 7的新的特性,例如强大的systemd,而systemd的使用也使得以往系统服务的/etc/init.d的启动脚本的方式就此改变,也大幅提高了系统服务的运行效率.但服务 ...

  10. 【转】ini载入保存类,操作INI配置文件方便的很

    /****************************************************************** * * ^_^ 恶猫 独门商标 挖哈哈 * * QQ:\> ...