网站地图    收藏   

主页 > 前端 > javascript >

javascipt中事件绑定方法介绍

来源:自学PHP网    时间:2023-11-07 10:07 作者: 阅读:

[导读] 在js中事件绑定有四种方法,包括有onXXX,dom,attachEvent,event这种种,下面我来简单的给各位朋友介绍相关的内定,本文章主要给大家介绍attachEvent事件,有需要的朋友可参考。...

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"

  });

}


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论