来自: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. MD5工具类-详细

    public class MD5Code { /* * 下面这些S11-S44实际上是一个4*4的矩阵,在原始的C实现中是用#define 实现的, 这里把它们实现成为static * final是表 ...

  2. 十五 Canny边缘检测算法

    一.Canny算法介绍 Canny 的目标是找到一个最优的边缘检测算法,最优边缘检测的含义是: 好的检测- 算法能够尽可能多地标识出图像中的实际边缘. 好的定位- 标识出的边缘要尽可能与实际图像中的实 ...

  3. subline Text3 插件安装

    --没有解决,换了vscode 安装Package Control 这是必须的步骤,安装任何插件之前需要安装这个 自动安装的方法最方便,只需要在控制台(不是win的控制台,而是subline 的)里粘 ...

  4. 紫书 习题 10-5 UVa 1213(01背包变形)

    这里就是01背包多了一维物品个数罢了 记得不能重复所以有一层循环顺序要倒着来 边界f[0][0] = 1 #include<cstdio> #include<vector> # ...

  5. 去掉vs2010字符串下红色波浪线

    由于在vs集成了qt库,无法提升代码. 所以下载了visual assist,然后新的问题出现了,凡是在vs中输入的字符串,下面都有红色的波浪线,而且没有错误,只是看着不舒服. 解决方法: 在VAss ...

  6. js获取css

    原帖地址:http://kingphp.blog.163.com/blog/static/20042324420120109438458/ 我们通过dom.style获得的属性是有限制的,只能获取ht ...

  7. 安卓Gallery配合ImageSwitcher不显示图片

    Gallary装的是缩略图(thumb),ImageSwitcher装的是大图. 不显示图片的一个可能原因是gallery没设置代理器,另一个原因是没使用相对布局. GalleryActivity.j ...

  8. 《SAS编程与数据挖掘商业案例》学习笔记之十八

    接着曾经的<SAS编程与数据挖掘商业案例>,之前全是sas的基础知识,如今開始进入数据挖掘方面笔记,本文主要介绍数据挖掘基本流程以及应用方向,并以logistic回归为例说明. 一:数据挖 ...

  9. [Python] Read and plot data from csv file

    Install: pip install pandas pip install matplotlib # check out the doc from site import pandas as pd ...

  10. JNI学习积累之三 ---- 操作JNI函数以及复杂对象传递

    本文原创,转载请注明出处:http://blog.csdn.NET/qinjuning 在掌握了JNI函数的使用和相关类型的映射后,以及知晓何利用javah工具生成对应的jni函数以及如何生成动态 链 ...