js中addEventListener和attachEvent的用法（转）

最新推荐文章于 2024-02-17 12:37:41 发布

bjash

最新推荐文章于 2024-02-17 12:37:41 发布

阅读量1.5k

点赞数

分类专栏： PHP

PHP 专栏收录该内容

417 篇文章

订阅专栏

Admin
2012年5月6日名人名言：成功的第一个条件是真正的虚心，对自己的一切敝帚自珍的成见，只要看出同真理冲突，都愿意放弃。——斯宾塞

//js中addachEvent，addEventListener的应用办法

//非IE浏览器的动态添加，刊出事务的办法

el.addEventListener（""click""， msg， false）;//添加

el.removeEventListener（""click""， msg， false）;//刊出

//IE中动态添加事务的办法

el.attachEvent（""onclick""，msg）;//添加

el.detachEvent（""onclick""，msg）;//刊出

例:

<body>

    <input id="123" type="text" id="test" value="点击" />

    <input id="Button1" type="button" οnclick="ok（）" value="删除动态添加的事务" />

<script>   

    var el = document.getElementById（"123"）; //先取得对象  

    alert（"el.addEventListener=="+el.addEventListener）;//提示

    alert（"el.attachEvent=="+el.attachEvent）;

    if （el.addEventListener） //用于 Mozilla系列

    {

        el.addEventListener（""click""， msg， false）;

    } 

    else if （el.attachEvent） //非Mozilla系列（IE）

    {

        el.attachEvent（""onclick""， msg）;

    }

    if （window.addEventListener）  //

    {

        window.addEventListener（""load""，msg， false）;

    } 

    else if （window.attachEvent）

    {

        window.attachEvent（""onload""， msg）;

    }

    function msg（）

    {

        alert（"我是动态添加的"）;

    }

    function ok（）

    {

        if （el.removeEventListener） //用于 Mozilla系列

        {

            el.removeEventListener（""click""， msg， false）;

        } 

        else if （el.detachEvent） //IE中动态添加事务的办法

        {

            el.detachEvent（""onclick""， msg）;

        }

    }

</script>

</body>

FireFox的addEventListener的用法。

addEventListener的参数一共有三个，语法为：

element.addEventListener（type，listener，useCapture）

下面是详解

此中element是要绑定函数的对象。
type是事务名称，要重视的是"onclick"要改为"click"，"onblur"要改为"blur"，也就是说事务名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，默示该事务的响应次序，下面重点介绍一下addEventListener的第3个参数（useCapture）。

userCapture若为true，则浏览器采取Capture，若为false则采取bubbing体式格式。建议用false，看个例子吧。

html代码

js代码

window.οnlοad=function（）{ document.getElementById（"div_test"）.addEventListener（"click"，test1，false）; document.getElementById（"btn_test"）.addEventListener（"click"，test2，false）; } function test1（）{ alert（"外层div触发"） } function test2（）{ alert（"内层input触发"） }

本身体验一下，若是userCapture是true则test1先触发，若是userCapture是false则test2先触发。

在迩来的工作中，用到了attachEvent办法，该办法可认为某一事务附加其它的处理惩罚事务，有时辰可能斗劲有效，这里将其根蒂根基用法总结一下。

其语法可以查看《DHTML手册》，里面有具体的申明，这里贴一个例子，该例子来自互联网：

document.getElementById（"btn"）.onclick = method1;
document.getElementById（"btn"）.onclick = method2;
document.getElementById（"btn"）.onclick = method3;
若是如许写，那么将会只有medhot3被履行

写成如许：
var btn1Obj = document.getElementById（"btn1"）;
//object.attachEvent（event，function）;
btn1Obj.attachEvent（"onclick"，method1）;
btn1Obj.attachEvent（"onclick"，method2）;
btn1Obj.attachEvent（"onclick"，method3）;
履行次序为method3->method2->method1

若是是Mozilla系列，并不支撑该办法，须要用到addEventListener
var btn1Obj = document.getElementById（"btn1"）;
//element.addEventListener（type，listener，useCapture）;
btn1Obj.addEventListener（"click"，method1，false）;
btn1Obj.addEventListener（"click"，method2，false）;
btn1Obj.addEventListener（"click"，method3，false）;
履行次序为method1->method2->method3

-----------------------------------------------------