<!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. go time笔记

    package main import ( "time" "fmt" ) func main() { t := time.Now().UnixNano() fm ...

  2. 我的NopCommerce之旅(9): 编写Plugin实例

    一.基础介绍 ——In computing, a plug-in (or plugin) is a set of software components that add specific abili ...

  3. 前端之CSS盒模型介绍

    css盒模型 css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距); 1.content: width:数值+单位 ...

  4. Vue.js - day6

    注意: 有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页 ...

  5. C#调用C库的注意事项

    作者:朱金灿 来源:http://blog.csdn.net/clever101 注意事项一: 从C#的exe进入C库的源码进行调试,需要先"启用非托管代码调试",如下图: 注意事 ...

  6. iOS NSDate 常用日期相关函数的封装

    Category是类别,一般情况用分类好,用Category去重写类的方法,仅对本Category有效,不会影响到其他类与原有类的关系. NSDate+Category.h 代码: #import & ...

  7. iOS 锁的常用方法

    锁的用法在iOS中有几种方法来解决多线程访问同一个内存地址的互斥同步问题: 方法一,@synchronized(id anObject),(最简单的方法)会自动对参数对象加锁,保证临界区内的代码线程安 ...

  8. uvm_reg_item——寄存器模型（五）

    uvm_reg_item 扩展自uvm_sequence_item,也就说寄存器模型定义了transaction item. adapter 的作用是把这uvm_reg_item转换成uvm_sequ ...

  9. Spring 配置定时器（注解+xml）方式—整理

    一.注解方式 1. 在Spring的配置文件ApplicationContext.xml,首先添加命名空间 xmlns:task="http://www.springframework.or ...

  10. js 双向绑定

    //双向绑定实例 <input name="" ng-bind-123="name" /> function DataBinder( object_ ...