<!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. 操作系统内核（linux）

    操作系统的内核(Kernel) 是一组程序,这组程序的重点在于管理计算机的所有活动以及驱动系统中的所有硬件. 有了内核后,开发者不必自己去考虑机器语言.所有硬件的相关参数.程序的可移植性.专一性了.但 ...

  2. Windows忘记mysql的密码

    1.查看mysql的安装路径 show variables like "%char%"; 路径:C:\Program Files\MySQL\MySQL Server 5.7\ 2 ...

  3. .NET Core 1.0 CentOS7 尝试(二、VSCode安装)

    晚上继续摸索~~  一.VSCode安装 下载VSCode,地址:https://code.visualstudio.com/Docs/?dv=linux64_rpm 直接双击安装或者使用rpm -i ...

  4. sql 使用汇总(PQSQL)

    --sql structured query language --DML--Data Manipulation Language--数据操作语言 query information (SELECT) ...

  5. chrome浏览器之网络面板

    这篇指导向你展示怎样检测网络张状况或者在chrome开发工具的网络面板中尽可能的优化网页. 排列的或受阻的请求 症状:同时发出六个请求.之后有一系列的请求排队或受阻.一旦最先的六个请求中有一个响应结束 ...

  6. webpack入门之最简单的例子 webpack4

    webpack在目前来说应该是前端用的比较多的打包工具了,那么对于之前没有接触过这块的该怎么办呢?答案很明显嘛,看资料,查文档,自己去琢磨,自己去敲一敲,跑一跑: 那么,这边我将以一个最基础的例子来将 ...

  7. uvm_monitor——借我一双慧眼

    monitor 用来捕获(监视)和检查总线的信号是否满足预期的要求.所有的user_monitor 继承自uvm_monitor,uvm_monitor继承自uvm_component,从源代码来看里 ...

  8. freebsd安装ports

    /etc/portsnap.conf 里面更改 SERVERNAME=portsnap.hshh.org portsnap的命令比较少 fetch 获取数据 extract 释放全部ports upd ...

  9. iOS Category 添加属性实现原理 - 关联对象

    iOS Category 添加属性实现原理 - 关联对象 RunTime为Category动态关联对象 使用RunTime给系统的类添加属性,首先需要了解对象与属性的关系.对象一开始初始化的时候其属性 ...

  10. 企业CIO、CTO必读的34个经典故事

    一. 用人之道 去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀.但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙.弥乐佛热情快乐,所以来的人非常多,但 ...