来自:http://www.cnblogs.com/wkylin/archive/2011/10/09/2203161.html

 

事件监听addEventListener----attachEvent
第一:简单的通用方法(IE && FF)

window.onload = function(){
   var oDiv = document.getElementById("J_myDiv"); //找到对象
   oDiv.onclick = function(){                                   //设置事件监听函数
        alert("click");
   }
}
缺点:1.添加单一事件

         2.不能删除事件

第二:IE中监听函数

var oDiv;

function fnClick(){
    alert("click me");
    oDiv.detachEvent("onclick",fnClick);//删除监听函数
}

window.onload = function(){
   oDiv = document.getElementById("J_myDiv");//找到对象
   oDiv.attachEvent("onclick",fnClick);       //添加监听函数
}

第三:标准DOM监听函数

var oDiv;

function fnClick1(){
   alert("click1");
   // oDiv.removeEventListener("click",fnClick2,false); //删除监听函数2
}

function fnClick2(){
   alert("click2");
}

window.onload = function(){

     oDiv = document.getElementById("J_myDiv"); //找到对象
     oDiv.addEventListener("click",fnClick1,false);   //添加监听函数1
     oDiv.addEventListener("click",fnClick2,false);   //添加监听函数2

}

第四:从js实例来看事件监听 参看:http://imethan.com/?p=208

第五:从实例来看JS的事件监听学习笔记(事件监听绑定、ff/IE不同的处理机制兼容总结)参看:http://hi.baidu.com/dou917/blog/item/40219f37e6e3deee1b4cff67.html

第六:代码总结

<script language="javascript">
//Javascript 事件演示
window.onload = function(){
    var hideBox = function(event){
        document.getElementById('status_show').style.display = 'none';
        document.getElementById('status_hide').style.display = 'block';
    };
    var showBox = function(event){
        document.getElementById('status_show').style.display = 'block';
        document.getElementById('status_hide').style.display = 'none';
        stopEvent(event);
    };
    var stopEvent = function(event){
        e = event || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else {
            e.cancelBubble = true;
        }
    };
    if(document.addEventListener){
        document.addEventListener('click', hideBox, false);
        document.getElementById('status_hide').addEventListener('click', showBox, false);
        document.getElementById('status_show').addEventListener('click', stopEvent, false);
    }else {
        //For IE
        document.attachEvent('onclick', hideBox);
        document.getElementById('status_hide').attachEvent('onclick', showBox);
        document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);
    }
};
</script>

分享一下事件监听addEventListener----attachEvent的用法的更多相关文章

  1. js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

    研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...

  2. 事件监听addEventListener()和removeEventListener() ---------1

    一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...

  3. JS事件监听 JS:attachEvent和addEventListener 使用方法

    attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListene ...

  4. (转载)JS事件监听 JS:attachEvent和addEventListener使用方法

    (转载)http://www.chhua.com/web-note146 attachEvent和addEventListener使用方法 Js代码 <html> <head> ...

  5. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  6. html屏幕旋转事件监听

    近期做微信服务号开发,在做图片展示的时候需要横竖屏的检测实现图片大小不同的展示. 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋.右旋还是没旋). 摘自:http://bbs.phonegap10 ...

  7. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

  8. [转]addEventListener() 方法,事件监听

    转载  白杨-M  http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...

  9. addEventListener() 方法,事件监听(去哪儿网用到过)

    addEventListener() 方法,事件监听 你可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(event ...

随机推荐

  1. 浅谈贝塞尔曲线以及iOS中粘性动画的实现

    关于贝塞尔曲线,网上相关的文章很多,这里我主要想用更简单的方法让大家理解贝塞尔曲线,当然,这仅仅是我个人的理解,如有错误的地方还请大家能够帮忙指出来,这样大家才能一起进步. 贝塞尔曲线,常用到的可分为 ...

  2. ES6学习笔记(十六)async函数

    1.含义 ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖,号称异步的终极解决方案. 前文有一个 Gen ...

  3. linux一个网卡添加多个虚IP

    [root@localhost ~]# ifconfig bond0:0 10.0.0.202 netmask 255.255.255.255 broadcast 10.0.0.255 up 摘自:h ...

  4. 搭建Lvs负载均衡群集

    一.Lvs详解 lvs内核模型 1.模型分析 用户访问的数据可以进入调度器 匹配调度器分配的虚拟IP|IP+端口(路由走向) 根据调度器的算法确定匹配的服务器 2.调度条件:基于IP.基于端口.基于内 ...

  5. HDU 2253 Longest Common Subsequence Again

    其实这个题我还不会,学长给了一个代码交上去过了,据说用到了一种叫做位压缩的技术,先贴代码吧,以后看懂了再来写 #include <stdio.h> #include <string. ...

  6. easyui combobox 设置值 顺序放在最后

    easyui combobox 设置值 顺序放在最后 如果设置函数.又设置选中的值,注意顺序, 设置值需要放到最后,否则会设置了之后又没有了: $('#spanId'+i).combobox(res) ...

  7. uva 1292 树形dp

    UVA 1292 - Strategic game 守卫城市,城市由n个点和n-1条边组成的树,要求在点上安排士兵,守卫与点相连的边.问最少要安排多少士兵. 典型的树形dp.每一个点有两个状态: dp ...

  8. Oracle EBS发放销售订单

     模拟发放销售订单界面进行发放操作 PROCEDURE insert_row(x_batch_id OUT NUMBER) IS l_autopack_flag VARCHAR2(1 ); l_a ...

  9. 菜鸟之webservice(一) 服务端搭建

    首先说一下,为什么取名叫菜鸟之webservice,由于本人技术真的不咋滴,写博客仅仅是为了对所学知识的总结.webservice对于我来说一直都是高大上的感觉,一个java web和javase都没 ...

  10. html 下载文件代码

    首先在html中加个a标签 <a class="menu" href="/cmdb/file_down" download="ljctest.t ...