原生事件绑定与解绑和jQuery的事件绑定与解绑详解

最新推荐文章于 2022-11-05 09:36:33 发布

扛狼1427

最新推荐文章于 2022-11-05 09:36:33 发布

阅读量187

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_42661283/article/details/95179045

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

原生js绑定单个事件与解绑

<body>
    <input type="button" id="btn" value="盘他">
    <input type="button" id="rm" value="移除">
</body>
<script>
    /* 使用 onclick 作为点击事件 后面的事件会覆盖前面的事件 执行alert(2)  无兼容性问题 */
    document.getElementById('btn').onclick = function(){
        alert('1')
    }
    document.getElementById('btn').onclick = function(){
        alert('2')
    }
    /* 解除绑定事件 onclick = null */
    document.getElementById('rm').onclick = function(){
        document.getElementById('btn').onclick = null
    }
</script>

原生js绑定多个事件与解绑

addEventListener(type,fn,useCapture) useCapture:事件处理机制概念

<body>
    <input type="button" id="btn" value="盘他">
    <input type="button" id="rm" value="移除">
</body>
<script>
    /* 使用addEventListener(type,fn,useCapture)绑定多个事件 事件类型无需带on
     IE8及以下有兼容性 使用attachEvent(type,fn)代替 事件类型需要带on */
    function f1(){
        alert('1')
    }
    document.getElementById('btn').addEventListener('click',f1,false)
    document.getElementById('btn').addEventListener('click',function(){
        alert('2')
    },false)
    document.getElementById('rm').addEventListener('click',function(){
        /* 使用removeEventListener移除事件 */
        document.getElementById('btn').removeEventListener('click',f1,false)
    },false)
    /* IE8及以下 */
    document.getElementById('btn').attachEvent('onclick',f1)
    document.getElementById('rm').attachEvent('onclick',function(){
        document.getElementById('btn').detachEvent('onclick',f1)
    })
</script>

jQuery绑定多个或单个事件与解绑

<body>
    <input type="button" id="btn" value="盘他">
    <input type="button" id="rm" value="移除">
</body>
<script>
/* 使用jquery的方式on(type,selector,fn)绑定多个事件 无兼容性问题 
   selector:用于委托事件 */
    $('#btn').on('click',function(){
        alert('1')
    })
     /* off 移除事件 */
    $('#rm').on('click',function(){
        $('#btn').off('click')
    })
</script>

扛狼1427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生事件绑定与解绑和jQuery的事件绑定与解绑详解

原生js绑定单个事件与解绑<body> <input type="button" id="btn" value="盘他"> <input type="button" id="rm" value="移除"></body><script> /* 使用 onclick 作为点击事件后面的事件会覆盖前面的事件 ...
复制链接

扫一扫

专栏目录