jQuery绑定或删除绑定事件

<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            //绑定click事件
            $("#panel h5.head").bind("click", function () {
                //获取#panel h5.head元素的紧跟着的同辈元素div
                var $text = $(this).next("div.content")
                if ($text.is(":visible")) {
                    //如果内容是显示的就隐藏
                    $text.hide();
                } else {
                    //反之就显示
                    $text.css("color", "#f0f");
                    $text.show();

                }
            });

            $("a").click(function (event) {
                event.type();//返回事件类型：click
                return false;//阻止链接跳转。
            })

            //删除事件
            $("#delAll").click(function () {
                $("#btn").unbind("click");//提供了参数click,删除click事件;若没有提供参数则删除所有的click事件
            })
        });

        //若在绑定时将该处理函数作为传递的参数，则可以只删除该特定的事件，即使同名也可操作：
        /* $(function () {
         $('#btn').bind("click", myFn1 = function () {
         $('#test').append("<p>我的绑定函数1</p>")
         }).bind("click", myFn2 = function () {
         $('#test').append("<p>我的绑定函数2</p>")
         }).bind("click", myFn3 = function () {
         $('#test').append("<p>我的绑定函数3</p>")
         }).bind("click", myFn4 = function () {
         $('#test').append("<p>我的绑定函数4</p>")
         });

         $('#delOne').click(function () {
         $('#btn').unbind("click", myFn2);//只删除第2个click特定函数
         });
         })
         */
        /* 当单击“删除第二个事件”按钮后，再次单击“点击我”按钮，会将原来的四个绑定函数如数复制一次显示出来。
         另外，对于只需要触发一次，随后就要立即解除绑定
         的情况，jQuery提供了一种简写方法一一one()方法.One()
         方法可以为元素绑定处理函数.当处理函数触发一次后，
         立即被删除。即在每个对象上，事件处理函数只会被执行
         一次。也就是不管点击按钮多少次，被绑定的函数都不会被复制多份*/

        $(function () {
            $("#btn").one("click", myFn1 = function () {
                $("#test").append("<p>我的绑定函数1</p>")
            }).one("click", myFn2 = function () {
                $("#test").append("<p>我的绑定函数2</p>")
            }).one("click", myFn3 = function () {
                $("#test").append("<p>我的绑定函数3</p>")
            }).one("click", myFn4 = function () {
                $("#test").append("<p>我的绑定函数4</p>")
            });


//一次性绑定多个事件，说的少做得多

$("p").bind("mouseover mouseout",function(){
    $(this).toggleClass("over");
});


        })

    </script>
</head>
<body>
<div id="panel">
    <h5 class="head">标题文字</h5>
    <div class="content" style="width: 100px; height: 80px;">
        曾多次麻烦方面来看某方面必控股非人防门必发帖人v缝纫机哦他们发客人反馈哦诶看
    </div>
</div>

<button id="btn">单击我</button>
<div id="test"></div>

<button id="delOne">点击我删除一个特定函数</button>

<p>绑定多个事件，以切换类样式为例</p>


</body>
</html>

posted on 2018-10-19 15:35 小虾米吖~ 阅读(421) 评论(0) 编辑收藏举报