jq on绑定事件off移除事件

小鱼儿 2023-06-05 08:11 28阅读 0赞

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan]

以前用的是bind(); 后来更新后用的on

（on() 方法是 bind()、live() 和 delegate() 方法的新的替代品）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="box1">hhhhhhhh</div>
        <div class="box2">hhhhhhhh</div>
    
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
        <script>
            // bind(); 旧的绑定事件的方法
            $('.box1').on('click mouseover mouseout',function(ev){
                // var e = ev||event;
                console.log(233);
            });
            // 添加不同事件，执行相同事件处理程序
            $('.box2').on({
                click: function(){
                    console.log('click');  
                },
                mouseover : function(){
                    console.log('mouseover');              
                },
                mouseout : function(){
                    console.log('mouseout');
                    
                }
            });

// 添加不同时间的不同执行程序

</script>
    
    </body>
    </html>

off 移除事件

给元素下子元素绑定事件

<div class="wrap">
            <h2>this is h2</h2>
            <p>this is a para</p>
            <mark>mark text<mark>
            <div>div11111111</div>
            <div>div22222222</div>
        </div>
    
    
     $('.wrap').on('click','div',function(){
                $(this).css({
                    fontSize: '40px',
                    color :'red'
                    });
            });
            // 把一个js原生对象作为实参传到$函数中，就能拿到这个原生对象对应的jq对象，
            // 然后调用jq操作函数

转载于:https://www.cnblogs.com/sandraryan/p/11527220.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/