<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

</head>

<body>

  <div id="box">

   <input type="button" value="按钮3" id="btn3">

   <a href="http://www.sogou.com/sie?hdq=AQxRG-7004&query=addEventListener%20of%20undefined&p=99350103&oq=&ri=-2" id="go">跳转</a>

  </div>

   <script type="text/javascript">

   var btn3 = document.getElementById('btn3');

   var box = document.getElementById('box');

   var id = document.getElementById('id');

   function showMes(event) {

      event = event || window.event;  //在IE8之前要用的是window.event;

	  var ele = event.target || event.srcElement; //在IE8之前用的不是target而是srcElement

      alert(ele.nodeName);

	  event.stopPropagation();

   }

      function showM() {

      alert("RGE");

   }

   function stopGo(event) {

     event.stopPropagation();

	 event.preventDefault();

   }

var eventUtil = {

  //给元素添加事件

   addHandler: function(element, type, handler) {

     if(element.addEventListener) {

	    element.addEventListener(type,handler,false);

	 } else if(element.attachEvent) {

	    element.attachEvent('on'+type, handler);

	 } else {

	    element['on'+type] = handler;

	 }

   },

   //给元素删除事件

     removeHandler: function(element, type, handler) {

     if(element.removeEventListener) {

	    element.removeEventListener(type,handler,false);

	 } else if(element.detachEvent) {

	    element.detachEvent('on'+type, handler);

	 } else {

	    element['on'+type] = null;

	 }

   },

   //获得兼容浏览器的事件对象

   getEvent: function(event) {

     return event?event:window.event;

   },

   //获取事件类型

   getType: function(event) {

      return event.type;

   },

   //获取时间来自哪个元素

   getElement: function(event) {

      return event.target || event.srcElement;

   },

   //阻止取消事件的默认行为

   preventDefault:function(event) {

     if(event.preventDefault) {

	    event.preventDefault();

	 } else {

	    event.returnValue = false;

	 }

   },

   //阻止时间冒泡

   stopPropagation: function(event) {

     if(event.stopPropagation) {

	     event.stopPropagation();

	 } else {

	    event.cancelBubble = true;

	 }

   }

}

eventUtil.addHandler(btn3, 'click', showMes);

eventUtil.addHandler(box, 'click', showM);

eventUtil.addHandler(go, 'click', stopGo);

</script>

</body>

</html>

　　把每一个事件封装在对象里面，把每一个功能封装在方法里面

基本event封装：阻止冒泡、默认事件等的更多相关文章

  1. 理解阻止浏览器默认事件和事件冒泡cancelBubble

    一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...

  2. jQuery event,冒泡,默认事件用法

    jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...

  3. 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  4. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

  5. 如何阻止浏览器的默认事件，你是否也遇到过无法阻止Google默认事件的情况( 原生JS )

    如题,话不多话,我们先看怎么解决 根据不同的绑定事件的方法,我们有不同的阻止默认事件的方法 如果你不知到如何绑定事件,请查看我的上一篇文章 关于浏览器滚动的兼容性问题以及事件绑定 1.句柄绑定 只需要 ...

  6. js阻止浏览器默认事件

    1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...

  7. javascript --- 事件冒泡与事件捕获

    事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...

  8. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  9. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  10. js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

    <!DOCTYPE html> <html>     <head>     <meta charset="UTF-8">     & ...

随机推荐

  1. 写个脚本列出neutron的ovs的topology。

    运行结果如下: $ ./nova-ifinfo  a7026868-407c-4c54-bb8f-a68623d7e13fvm name is: instance-00000035    # 查找VM ...

  2. c reference

    1,函数:strdup复制字符串函数原型定义:char * strdup(const char *s);函数说明:strdup()会先用maolloc()配置与参数s字符串相同的空间大小,然后将参数s ...

  3. 截取字符串一之slice

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. as3 与js相互通信

    1.as和js通讯实例 如果as3调用 JAVA script 中的函数直接在as中添加 if (ExternalInterface.available) {       ExternalInterf ...

  5. SQL server 和Oracle 序列

    1,SQL Server序列创建与使用 BEGIN IF EXISTS (SELECT * FROM sysobjects WHERE name = 'event_seq') DROP SEQUENC ...

  6. Java之工厂模式

    interface Fruit {     void eat(); } class Apple implements Fruit {     public void eat() {         S ...

  7. [LeetCode]题解（python）：136-Single Number

    题目来源: https://leetcode.com/problems/single-number/ 题意分析: 给定一个数组,每个数都出现了2次,只有一个出现了一次,找出这个数.要求时间复杂度O(n ...

  8. The basic introduction to MIX language and machine

    reference: The MIX Computer, The MIX Introduction sets, The basic info storage unit in MIX computer ...

  9. Ubuntu12.04获取root权限

    有的时候我们需要Ubuntu的root权限,我们该如何获取呢? 其实,很简单,我们只需要在终端中输入以下命令即可获得root权限. 第一步,打开终端 ( ctrl+alt+T ) 第二步,输入命令:s ...

  10. ngCookies模块

    Angular中ngCookies模块介绍 1.Cookie介绍 Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie.内存Cookie由浏览器维护,保存在 ...