jQuery元素绑定及解绑

jQuery元素绑定及解绑

---

元素绑定事件的几种方法：

• 对象.事件名字(事件处理函数);--->普通的写法

• 对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函

  这两种方式只能为存在的元素绑定事件,后添加的元素没有事件
  
  下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
  
  父级元素调用方法,代理子级元素绑定事件

• 对象.delegate("选择器","事件名字",事件处理函数);

• 对象.on("事件名字","选择器",事件处理函数);

演示

HTML
<input type="button" value="绑定事件" id="btn"/>
<input type="button" value="绑定事件" id="btn2"/>
<div id="dv"></div>

jQuery
    $(function () {
      //点击按钮为div绑定事件

      //此时on和delegate的作用是一样的,但是参数的顺序是不一样
      $("#btn").click(function () {
        $("<p>这是一个p</p>").appendTo($("#dv"));
        //和delegate是一样,都是在为子元素绑定事件
        $("#dv").on("click","p",function () {
          alert("p被点击了");
        });
      });

      $("#btn2").click(function () {
        $("<p>这是一个p2</p>").appendTo($("#dv"));

      });

    });

jQuery

 <script>
        //如果是先创建元素,再为这个子元素绑定事件(对象.事件名字(事件处理函数的方式)),后面再创建的子元素,没有事件

        //点击按钮为div中添加一个子元素,并且子元素有点击的事件
        $(function () {
            //第一个按钮
            $("#btn").click(function () {
                $("<p>这是一个p</p>").appendTo($("#dv"));
                //先创建,后绑定的事件是可以用的，后创建的绑定事件就不能用了

                $("#btn2").click(function () {
                    //后添加的
                    $("<p>这是一个p2</p>").appendTo($("#dv"));
                });

                // $("p").click(function () {
                //     alert("哈哈");
                // });

                // $("p").click(function () {
                //     alert("!")
                // });//同上 先创建,后绑定的事件是可以用的，后创建的绑定事件就不能用了

                //解决方法 delegate
                $("#dv").delegate("p","click",function () {
                    alert("点击事件")
                });

            });
        });
    </script>

总结区别：

对象.事件名字(事件处理函数);--->普通的写法
对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函数
前两种方式只能为存在的元素绑定事件,后添加的元素没有事件

下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
对象.delegate("选择器","事件名字",事件处理函数);
父级元素调用方法,代理子级元素绑定事件
对象.on("事件名字","选择器",事件处理函数);
父级元素调用方法,代理子级元素绑定事件

因为delegate方法中是调用的on的方法
所以,以后直接用on就可以了

元素解绑事件

1. unbind("事件1 事件2") 括号中什么都不写，解绑所有的事件

2. $("父级元素")delegate("子元素选择器","事件名称不带on",驱动函数)

3. $("#dv").off()

这里的delegate()这个方法其实就是调用的on，我们不如直接使用on 方法，我们可以看一下他的函数来确认下

 

on（）的参数写法区别

解绑事件
父级元素和子级元素的所有的事件全部解绑
$("#dv").off();
把父级元素和子级元素的点击事件解绑
$("#dv").off("click");
父级元素和子级的元素的多个事件,中间用空格
$("#dv").off("click mouseenter");
解绑p标签的点击事件
$("#dv").off("click","p");
p的两个事件都没了
$("#dv").off("click mouseenter","p");
p的所有的事件全部解绑
$("#dv").off("","p");
干掉div中所有的子元素的点击事件
$("#dv").off("click","**");