<!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. 用正则匹配一串字符串中的ip地址

    IP地址有4段组成,每一段数字的范围为0-255,在一段文本中提取ip地址可以这样 $src = 'src = alsdlk ks sdf2.3.3.4 234.193.1.120.1232 d.23 ...

  2. php导出CSV时，超长数字精度丢失问题与前导0的字符串丢失0的问题解决

    php生成的CSV有时候会遇到两个特殊情况: 1.输出的字段中,含有超长数字(18位的数字)比方身份证:122121197410180016,就算输出时字段加上"",还是会被识别成 ...

  3. URL中增加BASE64加密的字符串引起的问题（java.net.MalformedURLException:Illegal character in URL）

    序 昨天在做一个 Demo 的时候,因为是调用第三方的接口,採用的是 HTTP 的通信协议,依照文档上的说明,须要把參数进行加密后增加到 URL 中.可是,就是这个看似普普通通的操作,却让我着实费了非 ...

  4. VS2010 打包问题汇总

    问题1:打包时:应将msadox28.tlb排除 ,受到windows系统文件保护 解决方案:文件选项上,选择排除即可. 问题2:路径有文件,生成报错,提示找不到文件或文件被锁定. 解决方案:文件被锁 ...

  5. Javascript知识三

    O(∩_∩)O...今天继续学习了Javascript的知识,下面就总结一下. 数组: 判断是否为数组(instanceof Array) 在JavaScript中,数组不一定是同一类型 var ar ...

  6. CocoaPods 安装和使用

    CocoaPods的安装 >1. 打开终端, 输入 gem sources -remove https://rubygems.org/ >2. 再输入 gem sources -a htt ...

  7. BZOJ 4197: [Noi2015]寿司晚宴( dp )

    N^0.5以内的质数只有8个, dp(i, j, k)表示用了前i个大质数(>N^0.5), 2人选的质数(<=N^0.5)集合分别为j, k时的方案数. 转移时考虑当前的大质数p是给哪个 ...

  8. pyhon MySQLdb查询出来的数据设置为字典类型

    import MySQLdbimport MySQLdb.cursors cxn=MySQLdb.Connect(host='localhost',user='root',passwd='1234', ...

  9. iOS开发的准备

    一.程序设计语言 上一讲已经说到:要想开发一款软件,首先得学习一些相应的程序设计语言.至于iOS开发,需要学习的语言主要有:C.C++.Objective-C. 二.是否需要计算机专业知识 可能很多人 ...

  10. MySQL show binglog event in 'log_name'

    二进制日志文件记录的内容:记录表的更改. 二进制日志文件记录的形式:基于语句的复制.基于行的复制. 两种记录形式的优点与不足: 基于语句的复制-->它不能保证复制的正确性.如随机函数可能在两台机 ...