javascipt中事件绑定方法介绍

Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):


1、在DOM中,直接用onXXX="fun();"进行绑定


2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定


3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定


4、用<script for="domId" event="onXXX">fun();</script> 进行绑定



 代码如下 

<html>

<head>

<script type="text/javascript">

    function test(){


        window.alert("你投了一票");

        //解除绑定 IE 独有

        //document.getElementById("tp").detachEvent("onclick",test);

        //W3C 标准

        document.getElementById("tp").removeEventListener("click",test);

    }

   

</script>

</head>

<body>

<input type="button" id="tp" value="投票" />

</body>

<script>

    //绑定事件监听 IE独有

    //document.getElementById("tp").attachEvent("onclick",test);

    ////W3C 标准

    document.getElementById("tp").addEventListener("click",test);

</script>

</html>



 代码如下 

function addEvent( obj, type, fn ) {

        if ( obj.attachEvent ) {

            obj['e'+type+fn] = fn;

            obj[type+fn] = function(){obj['e'+type+fn]( window.event );}

            obj.attachEvent( 'on'+type, obj[type+fn] );

        } else

            obj.addEventListener( type, fn, false );

    }

    function removeEvent( obj, type, fn ) {

        if ( obj.detachEvent ) {

            obj.detachEvent( 'on'+type, obj[type+fn] );

            obj[type+fn] = null;

        } else

            obj.removeEventListener( type, fn, false );

    }


事件绑定BUG大家可参考参考。


 代码如下 

<a id="link_foo">Foo</a><a id="link_foo">Foo</a>

<script type="text/javascript">

function bindFooClick(){

  $("#link_foo").click(function(){

    console.log "asd"

  });

}

bindFooClick();

bindFooClick();

bindFooClick();

bindFooClick();

</script>


然后去点击 Foo 这个连接,将会出现4个日志输出。


如果不小心这个事件绑定被搞得成倍增长了,那就等着暴掉吧。


所以需要在 bindFooClick 绑定事件前去掉之前的绑定


 代码如下 

function bindFooClick(){

  $("#link_foo").unbind("click");

  $("#link_foo").bind("click", function(){

    console.log "asd"

  });

}


返回顶部
跳到底部

Copyright 2011-2024 南京追名网络科技有限公司 苏ICP备2023031119号-6 乌徒帮 All Rights Reserved Powered by Z-BlogPHP Theme By open开发

请先 登录 再评论,若不是会员请先 注册