<!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. Glide加载图片的事例

    //获取图片的url String url = resultsEntity.getUrl(); //判断获取的图片是否存在 if (resultsEntity.getItemHeight() > ...

  2. P1042 乒乓球

    题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革,以推动乒乓球运动在全球的普及.其中11分制改革引起了很大的争议,有一部分球员因为无法适应新规则只能选择退役.华华就是其中一位,他退役 ...

  3. Eclipse集成Maven环境(出现jar的解析或者缺失问题)(或者出现Invalid classpath publish/export dependency /common. Project entries not supported)的统一整理

    在正确配置完Maven,和Maven IntegrationFor Eclipse之后,新建了一个Maven Project 和一个Maven Module,发现新建的Module项目下的pom.xm ...

  4. 利用html5canvas给图片增加文字水印

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. WPF之Binding【转】

    WPF之Binding[转] 看到WPF如此之炫,也想用用,可是一点也不会呀. 从需求谈起吧: 首先可能要做一个很炫的界面.见MaterialDesignInXAMLToolKit. 那,最主要的呢, ...

  6. HDU 1171 Big Event in HDU 杭电大事件（母函数，有限物品）

    题意: 分家问题,对每种家具都估个值,给出同样价值的家具有多少个,要求尽可能平分,打印的第一个数要大于等于第二个数. 思路: 可以用背包做,也可以用母函数.母函数的实现只需要注意一个点,就是每次以一种 ...

  7. UVA 1151 Buy or Build （最小生成树）

    先求出原图的最小生成树,然后枚举买哪些套餐,把一个套餐内的点相互之间边权为0,直接用并查集缩点.正确性是基于一个贪心, 在做Kruskal算法是,对于没有进入最小生成树的边,排序在它前面的边不会减少. ...

  8. Easier Done Than Said?(应用到的知识）

    memset(b,0,sizeof(b)) 对于大块儿内存的分配,例如int arr[100];定义了数组arr,包含100个元素,如果你写成int arr[100]=0;想将数组全部内容初始化为0, ...

  9. CPP-基础：运算符重载详解

    1.运算符重载定义: C++中预定义的运算符的操作对象只能是基本数据类型.但实际上,对于许多用户自定义类型(例如类),也需要类似的运算操作.这时就必须在C++中重新定义这些运算符,赋予已有运算符新的功 ...

  10. C++值传递、引用传递和指针传递

    #include<iostream> using namespace std; //值传递 void change1(int n){ cout<<"值传递--函数操作 ...