绑定事件

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]();
        } );
    }
};

另一个实现:

var addEvent = (function () {
    if (document.addEventListener) {
        return function (el, type, fn) {
            el.addEventListener(type, fn, false);
        };
    } else {
        return function (el, type, fn) {
            el.attachEvent('on' + type, function () {
                return fn.call(el, window.event);
            });
        }
    }
})();

绑定onpropertychange事件

onpropertychange是微软制造的一个事件,它在一个元素的属性发生变化的时候触发,常见的有文本的长度改变,样长改变等,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);
    }
}

移除事件

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;
    }
};

加载事件 (如果把该函数调用放到window.onoad中,就没有效果了)

var loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = fn;
    }else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}

阻止默认事件

var  stopEvent = function(e){
      e = e || window.event;
      if(e.preventDefault) {
        e.preventDefault();
        e.stopPropagation();
      }else{
        e.returnValue = false;
        e.cancelBubble = true;
      }
    },
<form action="">
    <input type="text" value="请输入您的手机号">
    <input type="submit" id="sub" value="提交">
</form>
var sub = document.getElementById('sub');
sub.onclick = function(){
    stopEvent();
}

如果仅仅是阻止事件冒泡

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

取得事件源对象

var getEvent = function(e){
     e = e || window.event;
    return  event.target || event.srcElement
}
function getEvent() {
    if (window.event) return window.event;
    var c = getEvent.caller;
    while (c.caller) c = c.caller;
    return c.arguments[0];
} 
var getEvent = function(e) {
  var e = e || window.event;
  if (!e) {
    var c = this.getEvent.caller;
    while (c) {
      e = c.arguments[0];
      if (e && (Event == e.constructor || MouseEvent  == e.constructor)) {
        break;
      }
      c = c.caller;
    }
  }
  var target = e.srcElement ? e.srcElement : e.target,
  currentN = target.nodeName.toLowerCase(),
  parentN  = target.parentNode.nodeName.toLowerCase(),
  grandN = target.parentNode.parentNode.nodeName.toLowerCase();
  return [e,target,currentN,parentN,grandN];
}

javascript --- 兼容的那些事的更多相关文章

  1. 细说JavaScript单线程的一些事

    标签: JavaScript 单线程 首发地址:码农网<细说JavaScript单线程的一些事> 最近被同学问道 JavaScript 单线程的一些事,我竟回答不上.好吧,感觉自己的 Ja ...

  2. 关于javascript removeChild的那些事

    关于javascript removeChild的那些事 今天给removeChild搞死了,弄了几个小时,上代码 <ul id="myList"> <li> ...

  3. JavaScript 兼容各大浏览器阻止冒泡事件

    JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...

  4. 关于JavaScript继承的那些事

    在JavaScript中,对象的创建可以脱离类型(class free),通过字面量的方式可以很方便的创建出自定义对象. 另外,JavaScript中拥有原型这个强大的概念,当对象进行属性查找的时候, ...

  5. Javascript兼容和CSS兼容总结

    javascript部分 1. document.form.item 问题问题:代码中存在 document.formName.item(“itemName”) 这样的语句,不能在FF下运行解决方法: ...

  6. JavaScript 兼容处理IE67之 !"a"[0]

    IE67对字符串进行取值需要使用charAt()方法,不能直接通过数组方式的坐标访问: <!DOCTYPE html> <html> <head> <meta ...

  7. JavaScript 兼容 Array.prototype.slice.call

    IE9之前的IE版本的HTMLCollection以及NodeList不是Object的子类. 在通过Array.prototype.slice.call进行数组化的时候,IE9之前的IE版本会抛出异 ...

  8. ie7下的javascript兼容

    <a href="javascript:;" onclick="functionone();"></a> <script> ...

  9. Front End中Javascript兼容问题收集(转)

    1 select标签,就有诸多不兼容: A. cloneNode方法,对于非IE浏览器没有问题,对于IE浏览器, 遇到的问题包括:     1)option selected的会clone不过去,然后 ...

随机推荐

  1. poj 3280 回文字符串问题 dp算法

    题意:给一个字符串,构成回文(空也是回文) 其中增删都需要代价.问:代价最少? 思路:把字符串s变空  dp[i][j]表示变成回文的最小代价 for(i=m-1;i>=0;--i)       ...

  2. centos7 bond 和 网桥配置

    rhel7系统bond配置(更新版本):https://www.cnblogs.com/zhangjianghua/p/9119808.html Bonding的模式一共有7种: 1.mode=0(b ...

  3. luogu1251 餐巾计划问题

    ss是源点,代表餐巾卖家,tt是汇点,代表记账收钱者. 记p(i)是i天早晨的可用毛巾数,q(i)是i天完了的废毛巾数. 建图见注释 #include <iostream> #includ ...

  4. webdriver高级应用- 浏览器中新开标签页(Tab)

    #encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...

  5. Selenium WebDriver-判断页面中某一元素是否已经显示,通常用于断言

    判断界面中某一元素是否已经呈现,多用于断言,代码如下: #encoding=utf-8 import unittest import time from selenium import webdriv ...

  6. PHP 修改配置文件后重启命名

    centosPHP配置文件路径: /etc/php.ini 修改完配置文件后需要重启php服务: systemctl restart php-fpm

  7. 聊聊、Spring 第一篇

    Spring 大家都不陌生,企业应用中很流行的一个平台.从最开始的 Servlet 控制所有,到 MVC 模式的出现.从 SSH (Struts.Spring.Hibernate) 所谓的三剑客 到 ...

  8. set(集合)类

    1.set(集合)和 map(映射) 都属于关联容器,它们都支持查询一个元素是否存在,并能有效地获取元素.实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的 ...

  9. Linux定时任务Crontab命令详解 转

      linux 系统则是由 cron (crond) 这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的.另 外, 由于使用者自己也可以设置计划任务,所 ...

  10. 【Luogu】P2155沙拉公主的困惑(数论)

    题目链接 数论果然是硬伤qwq 还是智商上的硬伤 我们来讲两个道理 No.1 求1~i!中与i!互质的数的个数 实际上就是求i!的欧拉函数 有如下递推式: f[1]=1 if(i为合数) f[i]=f ...