jQuery的事件（绑定，委托，对象）和数据拷贝（extend）

目录

事件绑定

jQuery对象.事件类型(callBack); 

  on(events,[selector],[data],fn)

 移除事件

事件委托

事件对象 

 鼠标键盘事件对象

 表格添加删除全选案例

  合成事件（one, hove）

工具方法  数据拷贝

  jQuery.extend([deep], target, object1, [objectN])

    浅拷贝

   深拷贝

 递归实现深拷贝（函数封装）

 jQuery中全部都是静态获取 只有获取到的是HTMLCollection是动态获取

 jQuery中全部都是DOM2级事件绑定，没有DOM0

事件绑定

jQuery对象.事件类型(callBack); 

   一个事件可以对应多个事件处理函数 

$("ul li").click(function(){
            console.log("哈哈");
        });

        $("ul li").click(function(){
            console.log("呵呵");
        });
        $("ul li").click(function(){
            console.log("111");
        });

 

  on(events,[selector],[data],fn)

  •         events:事件类型  可以是一个也可以是多个
  •         [selector]:选择器
  •         [data]：数据
  •         fn:函数

 一个事件对应一个事件处理函数

 $("ul li").on("click",function(){
            console.log("哈哈");
        });

 多个事件对应同一个事件处理函数 多个事件之间用空格隔开

  $("ul li").on("click mousedown mouseup", function () {
            console.log("哈哈");
        });

 

 多个事件对应多个事件处理函数

 // 多个事件对应多个事件处理函数
        $("ul li").on({
            click: function () {
                console.log("click");
            },
            mousedown: function () {
                console.log("mousedown");
            },
            mouseup: function () {
                console.log("mouseup");
            }
        });

点击触发 

 移除事件

  •          off([event]);
  •         不传递参数移除全部事件类型  传递了参数 可以进行过滤
       $("ul li").off();
        $("ul li").off("click");

事件委托

  •        events:事件类型  可以是一个也可以是多个
  •         [selector]:选择器  事件委托的时候 谁委托制定委托的元素  传递选择器
  •         [data]：数据  传递给事件对象中的数据
  •         fn:函数
 $("ul").on("click", "p,li", {name:"哈哈"},function (ev) {
            console.log(ev);
            if (ev.target.nodeName.toLowerCase() == "li") {
                $(ev.target).css("backgroundColor", "blue");
            }

            if (ev.target.nodeName.toLowerCase() == "p") {
                $(ev.target).css("backgroundColor", "green");

            }
        });

事件对象 

 鼠标键盘事件对象

      // 鼠标事件对象
        $("ul li").on("mousedown", function (ev) {
            // 事件对象  ev
            console.log(ev); //jQuery.Event{...}

            // 事件源
            // ev.target
            console.log(ev.target);

            // 事件对象 属性
            // ev.type 事件类型
            console.log(ev.type); //mousedown


            // ev.ctrlKey  ev.altKey  ev.shiftKey 默认值都是false  按下了对应的键值是true  
            console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);

            // 位置属性
            // clientX /clientY  距离可视区域
            console.log(ev.clientX, ev.clientY);

            // pageX / pageY  距离文档的距离
            console.log(ev.pageX, ev.pageY);

            // screenX / screenY 距离屏幕
            console.log(ev.screenX, ev.screenY);

            // 原生JS中也有，IE8及以下不兼容
            // offsetX / offsetY  鼠标距离当前元素的距离
            console.log(ev.offsetX, ev.offsetY);

            // ev.which;   标识鼠标左(1)  中(2)  右(3)
            console.log(ev.which);


            // originalEvent：原生js对象
            console.log(ev.originalEvent);
        });


        $(document).keypress(function (ev) {
            // 事件对象  ev
            console.log(ev); //jQuery.Event{...}

            // 事件源
            // ev.target
            console.log(ev.target);

            // 事件对象 属性
            // ev.type 事件类型
            console.log(ev.type); //keydown

            // ev.ctrlKey  ev.altKey  ev.shiftKey 默认值都是false  按下了对应的键值是true  
            console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);


            // ev.keCode;
            // keydown / keyup 不区分大小写都是大写的ASCII值
            // keypress:区分大小写
            console.log(ev.keyCode);


            // originalEvent：原生js对象
            console.log(ev.originalEvent);

        });

 表格添加删除全选案例

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #form {
            width: 480px;
            margin: 30px auto;
            border: 1px solid #eee;
            border-radius: 5px;
            padding: 10px;
            line-height: 30px;
            position: relative;
        }

        button {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        #tab {
            width: 500px;
            margin: 30px auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 5px;
        }

        tbody tr td:first-child {
            text-align: center;
        }

        /*input[type]  属性选择器  选择input标签，并且有type属性input标签*/
        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/
        input[type="checkbox"] {
            width: 15px;
            height: 15px;
        }

        #div1 {
            position: relative;
            width: 480px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="form">
        请输入姓名: <input type="text" id="name"> <br>
        请输入性别: <input type="radio" id="sex" name="sex" value="男">男 <input type="radio" name="sex" value="女"
            checked>女<br>
        请输入年龄: <input type="text" id="age">
        <button>添加到表格</button>
    </div>
    <table id="tab">
        <thead>
            <tr>
                <th width="20%"><input type="checkbox" id="all">全选</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>张三</td>
                <td>女</td>
                <td>88</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李四</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>王五</td>
                <td>女</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
    <div id="div1">
        <button>删除所选行</button>
    </div>
    <script src="./js/jquery.1.12.4.js"></script>
    <script>
        // 绑定事件
        // 添加
        $("button").eq(0).click(function () {
            $("#tab tbody").append($(`<tr>
                <td><input type="checkbox"></td>
                <td>${$("#name").val()}</td>
                <td>${$("#sex").prop("checked")?`男`:`女`}</td>
                <td>${$("#age").val()}</td>
            </tr>`));
        });


        // 全选
        $("#all").click(function () {
            $("#tab tbody input[type=checkbox]").prop("checked", $(this).prop("checked"));
        });
        

        // 事件委托
        $("#tab tbody").on("click", "input[type=checkbox]", function () {
            // 小的checkbox个数等于选中的checkbox个数
            if ($("#tab tbody input[type=checkbox]").length == $("#tab tbody input[type=checkbox]:checked")
                .length) {
                $("#all").prop("checked", true);
            } else {
                $("#all").prop("checked", false);
            }
        });


        // 删除
        $("button").eq(1).click(function () {
            $("tbody input[type=checkbox]:checked").parents("tr").remove();
       //全选状态下全删除后全选按钮变回false
       if ($("#tab tbody tr").length == 0) {
        $('#all').prop('checked',false);
    }
      
        });

       
    </script>
</body>

</html>

  合成事件（one, hove）

  // 合成事件
        // one(eventType,callBack);//当前事件只触发一次
        $("div").one("click", function () {
            console.log('哈哈');
        });

        // hove(callBack,callBack); 鼠标移入及鼠标移出
        $("div").hover(function () {
            $(this).css("backgroundColor", "red");
        }, function () {
            $(this).css("backgroundColor", "blue");
        });

工具方法  数据拷贝

  jQuery.extend([deep], target, object1, [objectN])

  •         [deep]：默认值是false  浅拷贝  true:深拷贝
  •         target：目标对象
  •         object1, [objectN]:拷贝对象 传递一个对象拷贝一份,传递多个进行合并成为一个对象
  var obj1 = {
            name: "哈哈",
            age: 100,
            info: {
                height: "200cm",
                weight: "200kg"
            }
        };
        // var obj2 = {name:"呵呵",age:200,hobby:"篮球",sex:"男"};


        // 将obj1拷贝一份一模一样的
        var resObj1 = $.extend(true, {}, obj1);
        console.log(resObj1);
        //重新定义对象值
        resObj1.name = "11m";//原对象不改变
        resObj1.info.height = "180cm";
        resObj1.info.weight = "180kg";
        //  改变后输出
        console.log(resObj1);

       //原对象的内嵌也改变
        console.log(obj1);

 

将多个多个对象合并成一个对象  键是唯一的，后边的键值覆盖前边的 

 var obj1 = {
            name: "哈哈",
            age: 100,
            info: {
                height: "200cm",
                weight: "200kg"
            }
        };
        var obj2 = {name:"呵呵",age:200,hobby:"篮球",sex:"男"};


    
        var  resObj2 = $.extend(false,{},obj1,obj2);
        console.log(resObj2);

    浅拷贝

  • 引用：对应用一块堆内存地址
  •         浅拷贝：数据之间有堆内存的引用
  •         直接赋值  两个对象指向同一块堆内存空间  
  var testObj1 = {name:"haha",age:100};
        var copyObj1 = testObj1;
        copyObj1.name = "呵呵";

        console.log(testObj1,copyObj1);
        console.log(testObj1.name,copyObj1.name);

 

   // 创建一个新对象
        var testObj2 = {
            name: "haha",
            age: 100,
            info: {
                height: "200cm",
                weight: "200kg"
            }
        };
        var copyObj2 = {};

        for(var key in testObj2){
            // console.log(key);
            // console.log(testObj2[key]);
            copyObj2[key] = testObj2[key];
        }

        copyObj2.name = '222';//只改变直接设置的对象
        copyObj2.info.height = "180cm";//原来的对象也改变
        copyObj2.info.weight = "180kg";
        console.log(testObj2);
        console.log(copyObj2);

   深拷贝

        数据之间是完全独立的，没有堆内存引用 不会改变原数据

  var testObj2 = {
            name: "haha",
            age: 100,
            info: {
                height: "200cm",
                weight: "200kg"
            }
        };
        var jsonStr = JSON.stringify(testObj2);
        var deepCopyObj = JSON.parse(jsonStr);

        deepCopyObj.info.height = "2000cm";
        deepCopyObj.info.weight = "100000kg";
        console.log(deepCopyObj);
        console.log(testObj2);

 递归实现深拷贝（函数封装）

  // 递归实现深拷贝
        var testObj3 = {
            name: "haha",
            age: 100,
            info: {
                height: "200cm",
                weight: "200kg"
            },
            test: [10, 20, 30]
        };


        var a = 10;
        var res = deepCopy(testObj3);
        res.info.height = "测试";
        res.info.weight = "测试1";
        console.log(res);
        console.log(testObj3);

        //封装函数
        // souceData :原数据
        function deepCopy(souceData) {
            if (typeof souceData == "object" && souceData != null) { // 判断数据类型  复杂数据类型  进行操作
                // 创建容器 用来保存对应的属性和值
                var tarData = souceData instanceof Array ? [] : {};
                // 进行迭代
                for (var key in souceData) {
                    // 给当前对象增加属性和值

                    // 判断 数据类型  复杂数据类型  进行操作
                    if (typeof souceData[key] == "object" && souceData[key] != null) {
                        // 将深拷贝完成的返回值赋值给当前属性
                        tarData[key] = deepCopy(souceData[key]);

                    } else { //基本数据类型直接增加属性和值
                        tarData[key] = souceData[key];
                    }
                }
                // 将赋值完成的数据返回
                return tarData;
            } else { //基本数据类型直接返回
                return souceData;
            }
        }

版权声明：本文为weixin_58139900原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。