<!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. C++面试中的singleton类

    引子 “请写一个Singleton.”面试官微笑着和我说. “这可真简单.”我心里想着,并在白板上写下了下面的Singleton实现: 1 class Singleton 2 { 3 public: ...

  2. AJPFX关于子类父类中的构造

    1.子父类中的构造函数不存在重写,因为子父类的构造函数名字不一样(重写要求子父类的方法名字一模一样,包括参数列表)2.子类创建对象时会先运行父类的构造函数再运行子类的构造函数.因为每个子类的构造函数的 ...

  3. java数据结构和算法06（红黑树）

    这一篇我们来看看红黑树,首先说一下我啃红黑树的一点想法,刚开始的时候比较蒙,what?这到底是什么鬼啊?还有这种操作?有好久的时间我都缓不过来,直到我玩了两把王者之后回头一看,好像有点儿意思,所以有的 ...

  4. Django中多表的增删改查操作及聚合查询、F、Q查询

    一.创建表 创建四个表:书籍,出版社,作者,作者详细信息 四个表之间关系:书籍和作者多对多,作者和作者详细信息一对一,出版社和书籍一对多 创建一对一的关系:OneToOne("要绑定关系的表 ...

  5. codeforces727C(交互)

    题意 $n$个数,初始时不知道他们的值. 每次可以询问两个数的和,在$n$次询问内确定他们的值 $n \leqslant 5000$ Sol 首先询问出$1, 2$,$1, 3$,$2, 3$ 解个方 ...

  6. 国内的Jquery CDN免费服务

    Jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影.很多网站都喜欢采用一些Jquery CDN加速服务,这样网站加载jquery会更快.之前火端网络的一些网站都是使用Google的jq ...

  7. Spark-水库抽样-根据抽样率确定每个分区的样本大小

    /* * 输入:采样率,待采样的RDD * 输出:每个分区的样本大小(记录数) * 由采样率确定,每个分区的样本大小 */ def findNumPerPartition[T: ClassTag, U ...

  8. windows下Mongodb和Memcached安装笔记

    MongoDB安装: D:\ProgramFiles\MongoDBServer3.2\bin\mongod --dbpath D:\mongoData D:\ProgramFiles\MongoDB ...

  9. Gym 100342F Move to Front （树状数组动态维护和查询）

    用树状数组动态和查询修改排名. 树状数组可以很方便地查询前缀和,那么可以利用这一特点,记录一个点在树状数组里最后一次出现的位置, 查询出这个位置,就可以知道这个点的排名了.更改这个点的排名的时候只要把 ...

  10. VGG16学习笔记

    转载自:http://deanhan.com/2018/07/26/vgg16/ 摘要 本文对图片分类任务中经典的深度学习模型VGG16进行了简要介绍,分析了其结构,并讨论了其优缺点.调用Keras中 ...