文档章节

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

摇滚哈哈狗
 摇滚哈哈狗
发布于 2015/01/02 22:04
字数 329
阅读 58
收藏 1
网上有关这方面的代码比较多而乱,这里整理一下并加以改进。

添加事件

var addEvent = function( obj, type, fn ) {
  if (obj.addEventListener)
      obj.addEventListener( type, fn, false );
  else if (obj.attachEvent) {
      obj["e"+type+fn] = fn;
      obj.attachEvent( "on"+type, function() {
          obj["e"+type+fn].call(obj, window.event);
      } );
  }
};

移除事件

var removeEvent = function( obj, type, fn ) {
  if (obj.removeEventListener)
      obj.removeEventListener( type, fn, false );
  else if (obj.detachEvent) {
      obj.detachEvent(  "on" +type, obj["e"+type+fn] );
      obj["e"+type+fn] = null;
  }
};


阻止事件(包括冒泡和默认行为)

var stopEvent = function(e){
    e = e || window.event;
    if(e.preventDefault) {
      e.preventDefault();
      e.stopPropagation();
    }else{
      e.returnValue = false;
      e.cancelBubble = true;
    }
  },

仅阻止事件冒泡

var stopPropagation = function(e) {
   e = e || window.event;
  if (!+"\v1″) {
     e.cancelBubble = true;
  } else {
     e.stopPropagation();
  }
}


仅阻止浏览器默认行为

var  preventDefault  = function(e) {
    e = e || window.event;
    if(e.preventDefault) {
      e.preventDefault();
    }else{
      e.returnValue = false;
    }
}

取得事件源对象

var getEventTarget = function(e){
   e = e || window.event;
  var target = event.srcElement ? event.srcElement : event.target;
  return target;
}


附:绑定onpropertychange事件
onpropertychange,它在一个元素的属性发生变化的时候触发,一般用在表单元素中捕获其value值改变,它比onchange事件更实时捕获它的改变,不过为微软私有事件。FF大致和它相似的有oninput事件,不过它只针对textfield与textarea的value属性。safari,firefox,chrome与 opera都支持此事件。

var addPropertyChangeEvent = function (obj,fn) {
  if(window.ActiveXObject){
      obj.onpropertychange = fn;
  }else{
      obj.addEventListener("input",fn,false);
  }
}

本文转载自:http://blog.csdn.net/itchiang/article/details/7769341

摇滚哈哈狗
粉丝 14
博文 226
码字总数 28445
作品 0
深圳
程序员
私信 提问
Array & Event & Dom 兼容总结

Dom 元素节点 & 属性节点 & 文本节点 nodeName & tagName & nodeValue 测试代码 nodeName与tagName在浏览器中没有兼容问题,返回值是全大写。 下面是文本节点的属性 下面是元素节点 下面是文...

烽穹寒渊
2016/08/25
0
0
React 事件和 Dom 事件

注意:Chrome 中打印的对象展开的时候显示的是当前对象的值,可能已经不是打印的时候的值了,所以需要通过在打印的地方打断点的形式来查看准确的值。或者直接通过打断点查看。 React 事件和 ...

liushanga
01/12
0
0
js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) ...

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1.阻止浏览器的默认行为 [java] function stopDefault(e) { //如果提供了事件对象,...

java_T
2012/07/13
0
0
JavaScript事件机制详细研究

本篇开始将回顾下Javascript的事件机制。同时会从一个最小的函数开始写到最后一个具有完整功能的,强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handl...

yandxxx
2012/10/25
0
0
总结jquery使用事件(复合事件、事件绑定等)

本文整理总结jquery事件,在使用jquery开发中,一定会使用到事件,下面是常用的事件。 1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种...

^6^|^6^
2011/12/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HBase新建表报错 org.apache.hadoop.hbase.TableExistsException

之前安装了旧版本的hbase, 没有清理其在Zookeeper上的内容。 解决办法 stop-hbase.sh zkCli.sh >>> rmr /hbase >>> quit start-hbase.sh...

dreamness
12分钟前
0
0
大数据技术的应用现状与展望

本文是我即将由嵌入式底层驱动行业转入大数据研究领域的综述文章,案例摘自《程序员》电子期刊,由于初学者知识面较窄,查看文献量较少,因此后续还会在此基础上,继续跟踪并深入研究,为论文...

陈小君
18分钟前
0
0
NCRE考试感想 三级信息安全(上)

时间节点 报名时间:2017-06 考试时间:2017-09 查询成绩:2017-11   考试简述 满分100分,时间120分钟。题型有三种,选择题、综合题、应用题。   备考经验 题库是WLJY的,买了激活码。为了...

志成就
25分钟前
0
0
百度地图显示我的位置

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery-1.8.2.min.js"></script></head><body><sec......

塔塔米
30分钟前
0
0
mysql mysql常用的常用函数

1. 数学函数 函 数 作 用 ABS(x) 返回x的绝对值 CEIL(x),CEILIN(x) 返回不小于x的最小整数值 FLOOR(x) 返回不大于x的最大整数值 RAND() 返回0~1的随机数 RAND(x) 返回0~1的随机数,x值相同返...

edison_kwok
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部