jquery事件处理on学习笔记

【语法】

element.on(events,[selector],fn)

1、events一个或多个用空格隔开的事件类型，如“click”或“click keydown”

2、selector：元素的子元素选择器。如ul里面的li

3、fn：回调函数，即绑定在元素身上的倾听函数

作用一：绑定一个或多个处理事件处理程序

<body>
    <div></div>
</body>

情况1：绑定多个事件，且事件的处理程序不同（以对象的形式书写）

<script>
    $(function() {
        $("div").on({
            mouseenter: function() {
                $(this).css("background", "skyblue");
            },
            click: function() {
                $(this).css("background", "purple");
            },
            mouseleave: function() {
                $(this).css("background", "blue")
            }
        })
    })
</script>

情况2：绑定多个事件，事件的处理程序相同，多个事件之间用空格隔开

<script>
    $(function() {
        $("div").on("mouseenter mouseleave", function() {
            //鼠标经过加上current类，鼠标离开去掉current类
            $(this).toggleClass("current");
        })
    })
</script>

作用二：实现事件委托

 $("ul li").click(function() {
            ……
  })

问题：利用隐式迭代，给每一个小li都绑定了一个点击click事件，略显麻烦改进如下：

 $("ul").on("click","li",function(){
           ……
  })

解决方案：利用on()只用给父元素ul绑定的点击click事件，但注意触发的对象是ul的孩子小li，只有点击了li才会触发事件。当点击了li会产生事件冒泡，此时就会触发父亲ul里面的点击click事件

作用三：on()可以给未来动态生成的元素绑定事件（利用到了上述的事件委托）

<body>
    <ul></ul>
</body>

问题：单个注册事件无法实现给“动态创建的元素”绑定事件，

<script>
    $(function() {
        $("ul li").click(function() {
            alert("绑定成功！");
        })
        //单个注册事件，不能给如下后来新创建小li绑定该click事件
        var li = $("<li>我是后来创建的</li>");
        $("ul").append(li);
    })
</script>

解决方案：采用on可以给未来动态创建的小li绑定事件

<script>
    $(function() {
        $("ul").on("click", "li", function() {
            alert("绑定成功！")
        });
        // on()利用可以实现事件委托这一特性，可以给动态创建的元素绑定事件
        var li = $("<li>我是后来创建的</li>");
        $("ul").append(li);

    })
</script>