jQuery中事件绑定，移除，触发事件

JQuery发展历程：

简单事件绑定(click,mouseenter,mouseleave)===>bind事件绑定===>delegate事件绑定===>on事件绑定

1.简单事件绑定

$("p").click(function(){
    //事件响应方法
});

缺点：不能绑定多个事件

2.bind事件绑定

$("p").bind("click,mouseenter",function(){
    //事件响应方法
});

第一个参数：事件类型

第二个参数：事件处理函数

缺点：不支持动态事件绑定

3.delegate注册，委托事件

<div>
    <span></span>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

$("div").delegate("p","click",function(){  //此时div中所有的 p 都会触发委托代理事件，但是span不会
    console.log($(this));  //当前点击的 p 标签
});

第一个参数：selector，要绑定事件的元素
第二个参数：事件类型
第三个参数：事件处理函数

特点：给父元素注册委托事件，最终还是由子元素执行

原理：给div（父元素）注册委托代理事件，当点击 p 触发事件时，（p 本身是没有任何事件，是借用冒泡，点击p 触发父元素（div）的委托代理事件），

此时 div 会查看点击的的事件元素和参数1 是否一致，如果一致则同意把事件给p。

可理解为：快递员，储存柜和自己的关系

缺点：只能注册委托事件，需要记得注册事件太多

4.on事件绑定

方式1：on注册简单事件

$(selector).on("click",function(){}); //给$(selector)绑定事件，由自己触发，不支持动态绑定

方式二：on注册委托事件

$(selector).on("click","span",function(){}); //给$(selector)绑定代理事件，但必须是它的内部子元素span 才能触发这个事件，支持动态绑定

on注册事件的语法：

第一个参数：events，绑定事件的名称，可以用空格分隔的多个事件

第二个参数：selector，执行事件的后代元素（可选），如果没有后代元素，事件则自己执行

第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）

第四个参数：handler，事件处理函数

$(selector).on(events[,selector][,data],handler);

案例：动态添加表格，删除表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #dv {
            width: 250px;
            height: 400px;
            /* border: 1px solid #333; */
            margin: 100px auto;
        }
        
        table {
            border-collapse: collapse;
        }
        
        td,
        th {
            width: 100px;
            border: 1px solid #333;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="dv">
        <input type="button" value="清空内容" id="delAll">
        <input type="button" value="添加" id="add"><br>
    </div>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function() {
            var arr = [{
                name: "宾利",
                score: 100
            }, {
                name: "刘华",
                score: 34
            }, {
                name: "恒瑞",
                score: 77
            }, {
                name: "利泰",
                score: 99
            }, {
                name: "哈斯",
                score: 76
            }, ];
            var $tab = $("<table><thead><tr><th>姓名</th><th>成绩</th><th>操作</th></tr></thead></table>");
            for (var i = 0; i < arr.length; i++) {
                var obj = arr[i];
                // 创建行对象
                var $tr = $("<tr><td>" + obj.name + "</td><td>" + obj.score + "</td><td><a href='#' class='del'>del</a></td></tr>");
                // 把行追加到table中
                $tr.appendTo($tab);
            }
            $tab.appendTo("#dv"); //把table显示在页面上
            // 添加事件
            $('#add').on("click", function() {
                $tr = $("<tr><td>厉害了</td><td>10000</td><td><a href='#' class='del'>del</a></td></tr>");
                $tr.appendTo($tab);
            });
            // 清空事件
            $("#delAll").on("click", function() {
                $("tbody").remove();
            });
            // 单行删除事件（找到他们共同的父级元素===>tbody）
            $("tbody").on("click", ".del", function() {
                $(this).parents("tr").remove();
            });
        });
    </script>
</body>

</html>

View Code

2、移除事件绑定事件

unbind 和 undelegate 现在不使用了，统一使用 off 方式（针对on绑定事件）

方式一：

　1.不传参

$(selector).off();  //解绑 selector 的所有绑定事件

方式二：

　2.传参

$(selector).off("click");  //解绑指定事件，譬如：click

3、触发事件

　方式一：

$(selector).click(); // 直接输入选择器名字及触发的事件类型

　方式二：

$(selector).triggle("click"); // 选择要触发的元素，调用triggle 方法

案例：触发事件

$("p").on("click",function(){
    alert("p 的点击事件");
});

$("#btn").on("click",function(){
    //方式一：
    $("p").click();
    //方式二：
    $("p").triggle("click");
})；

View Code