<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

    <meta name="format-detection" content="telphone=no, email=no"/>

    <meta name="apple-touch-fullscreen" content="yes"/>

    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>

    <title></title>

    <style type="text/css">

        .button {

            height: 2em;

            border: 0;

            border-radius: .2em;

            background-color: #34538b;

            color: #fff;

            font-size: 12px;

            font-weight: bold;

        }

    </style>

</head>

<body>

<input type="button" id="button" class="button" value="点击我，显示高度"/>

<a href="javascript:void (0);" id="link-a">标度</a>

</body>

<script type="text/javascript">

    //p361--高级程序3

    var myBtn=document.getElementById("button");

    myBtn.onclick=function(event){

       var event = EventUtil.getEvent(event);

        console.log("点击成功");

    };

    var myLink=document.getElementById("link-a");

    //用于取消事件的默认行为

    myLink.onclick=function(event){

        var event=EventUtil.getEvent(event);

        var target=EventUtil.getTarget(event);

        console.log(target); //输出：<a href="javascript:void (0);" id="link-a">标度</a>

    };

    //用于取消事件的默认行为

/*    myLink.onclick=function(event){

        var event=EventUtil.getEvent(event);

        var target=EventUtil.preventDefault(event);

    };*/

    var EventUtil = {

        /**

         * <br>给元素对象注册事件处理程序<br>

         * @param ele 要绑定的元素对象

         * @param type 事件名称,例如click、load等

         * @param handler 事件处理程序函数

         */

        registerEvent : function(ele, type, handler){

            // 支持IE9、Firefox、Safari、Chrome、Opera

            if (ele.addEventListener) {

                ele.addEventListener(type, handler, false);

            }

            // 支持IE浏览器

            else if(ele.attachEvent) {

                ele.attachEvent("on" + type, handler);

            }

            // 通过属性名的方式为元素指定事件处理程序

            else {

                ele["on" + type] = handler;

            }

        },

        //删除事件处理程序

        removeEvent : function() {

            if (ele.removeEventListener) {

                ele.removeEventListener(type, handler, false);

            } else if(ele.detachEvent) {

                ele.detachEvent("on" + type, handler);

            } else {

                ele["on" + type] = null;

            }

        },

        // 获取(DOM/IE中的)事件对象

        getEvent : function(event) {

            return event ? event : window.event;

        },

        // 返回事件的目标

        getTarget : function(event) {

            return event.target || event.srcElement;

        },

        // 取消事件冒泡

        stopPropagation : function(event) {

            if (event.stopPropagation) {

                event.stopPropagation();

            } else {

                event.cancelBubble = true;

            }

        },

        // 获取当前事件发生的对象

        preventDefault : function(event) {

            if (event.preventDefault) {

                event.preventDefault();

            } else {

                event.returnValue = false;

            }

        }

    }

</script>

</html>

　　

js-dom-EventUtil的更多相关文章

  1. 货架工程项目之js dom实现项目工程进度图

    笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...

  2. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  3. js DOM的几个常用方法

    <div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...

  4. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  6. Js DOM 详解

    DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...

  7. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  8. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  9. JS(DOM 和 BOM)

    JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

  10. JS DOM（文档对象模型）与BOM（浏览器对象模型）

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

随机推荐

  1. python学习之序列化

    序列化:不同编程语言之间传递对象需要序列化成标准格式,有XML /JSON,json格式化为字符串,UTF-8编码,速度快,切实标准格式.JSON 和 Python内置的数据类型对应如下: JSON ...

  2. Linux sftp用法

    sftp用法 1. 用sftp如何登录服务器 sftp 是一个交互式文件传输程式.它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性.下边就简单介绍一下如何远程连接主机,进行文件的上传和下载 ...

  3. mongodb Gridfs操作

    GridFS 介绍 GridFS是MongoDB规范用于存储和检索大文件,如图片,音频文件,视频文件等.这是一种文件系统用来存储文件,但数据存储于MongoDB集合中.GridFS存储文件比其文档大小 ...

  4. hihocoder1860 最大异或和

    思路: 把N个前缀异或和插入一棵trie树中,然后对每个前缀异或和x计算能使x ^ y最大的前缀异或和y.利用了异或运算的a ^ b ^ a = b的性质. 参考了https://cloud.tenc ...

  5. nodejs中的异步回调机制

    1.再次clear Timer定时器的作用 setTimeOut绝非是传统意义上的“sleep”功能,它做不到让主线程“熄火”指定时间,它是用来指定:某个回调在固定时间后插入执行栈!(实际执行时间略长 ...

  6. codevs 1313 质因数分解

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题目描述 Description 已知正整数 n是两个不同的质数的乘积,试求出较大的那个质数 . 输入描述 I ...

  7. ipsec配置strongswan.conf和ipsec.conf

    配置strongswan.conf vi /usr/local/etc/strongswan.conf # strongswan.conf - strongSwan configuration fil ...

  8. gEdit - GTK+ 基础文本编辑器

    语法 gedit [--help] [--version] [文件名] [文件名] [文件名] 等等... 描述 gEdit 是一个 X窗口系统下的基础文本编辑器由 GTK+ 写成.它现在支持建立,打 ...

  9. jsTree展开根节点 设置用户图标

    $("#jstree").on("loaded.jstree", function (event, data) { var n = 0; var root = ...

  10. PAT (Basic Level) Practise （中文）-1035. 插入与归并(25)

    PAT (Basic Level) Practise (中文)-1035. 插入与归并(25)   http://www.patest.cn/contests/pat-b-practise/1035 ...