2.03.24_1jQuery的事件处理

2.03.24jQuery的事件处理

1.事件类型

• jq常见的事件类型：
  • click
  • mouseenter
  • mouseleave
  • keydown
  • keyup
  • keypress
  • focus
  • blur
  • change
• jq封装的事件是个函数，调用时事件函数通过传参的方式给予到jq对象
• 比如：

    //jq:
    $(".box").click(function(){   })
    //js:
    dom.onclick = function(){  }

2.事件绑定

1. click事件

    <style>
        .box {
            width: 100px;
            height: 120px;
            background-color: #ccc;
            font-size: 30px;
            cursor: pointer;
        }
    </style>

    <div class="box">0</div>

    <script src='./jquery/jquery-3.6.0.min.js'></script>
    <script>
        // 需求：
            // 点击盒子，计数器变量增一

        // 编码：
        // 定义计数器变量
        var count = 0 ;
        // 给.box标签绑定点击事件（此处不需要使用on,也不需要使用等于号 =）
        $(".box").click(function(){
            count ++;
            // 设置盒子的文本
            // $(".box").text(count);
            // console.log(this);// 事件调用者 原生dom对象
            // console.log($(this));// 事件调用者 jquery对象
            $(this).text(count);
        })

    </script>

• 注意jq绑定事件函数的this
  • jq绑定事件函数的 this 是 事件调用者 原生dom对象
  • jq绑定事件函数的$(this) 是 事件调用者 jquery对象

2. focus
3. blur
4. change
5. 等价于oninput的写法，没有oninput这个事件

    <input type="text" placeholder="请输入" class="inp">

    <select id="selectBox">
        <option value="0">选择城市</option>
        <option value="gz">广州市</option>
        <option value="sz">深圳市</option>
        <option value="mm">茂名市</option>
        <option value="zh">珠海市</option>
    </select>

    <script src='../../jq/jquery-3.6.0.min.js'></script>
    <script>
        // 表单事件
        // focus
        $(".inp").focus(function(){
            // 输入框获取焦点 设置背景色黄色
            $(this).css("background","yellow")
        })
        // blur
        $(".inp").blur(function(){
            // 输入框失去焦点 设置背景色白色
            $(this).css("background","white")
        })

        // change
        $("#selectBox").change(function(){
            // $(this) 是jquery对象，是change函数的调用者
            var city = $(this).val();
            console.log("参数：",city);
        })

        // oninput 
        // $(...).input is not a function
        // $(".inp").input(function(){});// 不存在这个函数 所以报错

        // 正确写法
        $(".inp").on('input',function(){
            var v = $(this).val()
            console.log(v);
        })

    </script>

3.事件对象

• 原生事件对象event与jq事件对象对象的event不完全一样，但常用的event对象的属性的拼写是一样的，可以把它当原生event一样使用，使用过程中遇到问题，可以打印一下jq事件对象event看一看

    <div class="container" style="width: 100px;height: 100px;background-color: blanchedalmond;"></div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
    // 给.container标签绑定鼠标移动事件
    $(".container").mousemove(function(event){
        console.log(event);
        var _type = event.handleObj.origType;
        console.log(_type);
        console.log(event.pageX,event.pageY);
    })
</script> 

4.事件委托

• jq的事件中一样具有事件委托，事件冒泡等行为

    <div class="layout">
        <a class="link-item" href="/login">登录</a>
        <a class="link-item" href="/register">注册</a>
        <div class="container" style="width: 100px;height: 100px;background-color: blanchedalmond;"></div>
    </div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>
     $(".link-item").click(function(event){
            // 阻止浏览器默认行为（此处禁止链接跳转）
            // return false;
            // 调用事件对象提供的方法, 阻止浏览器默认行为
            event.preventDefault();
            // 阻止事件冒泡
            //event.stopPropagation();
            console.log("a");
    })

    $(".layout").click(function(){
            console.log("div");
    })

1. jq对象.bind

• 从 jQuery 3.0 开始，.bind()已弃用。不鼓励使用它，因为他被改成什么样不可知，在不同版本有不同的功能。
• bind可以给当前元素及其指定的子元素绑定事件

    <div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">        
        <button class="btn-1">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
    </div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

    $(".container").bind("click","button",function(event){
        console.log(event.target);
    })

    $(".test").click(function(event){
        event.stopPropagation();
        console.log("test");
    })

    $(".test").click(function(event){
        console.log("test2");
    })

</script>   

• bind可以绑定多个事件

    <div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">        
        <button class="btn-1">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
    </div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

        // bind 绑定事件（可以绑定多个事件）
        // $obj.bind(参数1，参数2)
        $(".btn-1").bind("click mouseenter mouseleave",function(event){
            // 获取事件类型
            var _type = event.handleObj.origType;
            console.log("触发事件类型:",_type);
        })
</script>   

• $obj.bind(参数1，参数2（可选），参数3)

    <div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">        
        <button class="btn-1">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
    </div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

        // 可选参数：
        //$obj.bind(参数1，参数2（可选），参数3)
        $(".btn-1").bind("click mouseenter mouseleave",{x:100,y:100},function(event){
            // 获取事件类型
            var _type = event.handleObj.origType;
            console.log("触发事件类型:",_type);
            // 打印参数2(可选参数)
            console.log(event.data);
        })
</script>  

• bind可以动态地给后面添加的元素绑定事件

    <div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">        
        <button class="btn-1">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
    </div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

    $(".container").bind("click","button",function(event){
        console.log(event.target);
    })

    //这里后面添加的button元素也被绑定了上面的click事件
    var str = '<button>按钮+</button>';
    $(".container").append(str);

</script>   

2. jq对象.delegate

• 从 jQuery 3.0 开始，.delegate()已弃用，不鼓励使用它，因为他被改成什么样不可知，在不同版本有不同的功能。

    <div class="container "  style="width: 100px;height: 200px;background-color: blanchedalmond;">
        <ul >
            <li><button>按钮1</button></li>
            <li><button>按钮2</button></li>
            <li><button>按钮3</button></li>
        </ul>
    </div>
<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

    // $obj.delegate(参数1，参数2，参数3)
    // $obj.delegate(选择器，事件类型，回调函数)
    $(".container").delegate("button","click",function(){
        console.log(this);//事件源
    })

    // 可以动态创建按钮，新创建的按钮也具有上面绑定的事件
    var str = '<li><button>按钮4</button></li>';
    $(".container ul").append(str);

    //只能给只能指定的元素添加事件，不能给元素本身添加

</script>   

3. jq对象.on

• 建议使用该方法，不使用上面两个方法
• 只能给指定的元素绑定事件，不能给自身绑定事件
• 可以绑定多个事件
• 能动态绑定事件

    <div class="container" style="width: 100px;height: 200px;background-color: blanchedalmond;">        
        <button class="btn-1">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <div class="test" style="width: 50px;height: 50px;background-color: red;"> </div>
    </div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

    //只能给指定的元素绑定事件，不能给自身绑定事件
    $(".container").on("click","button",function(event){
        console.log(event.target);
    })

    //可以绑定多个事件
    $(".container").on("click mouseenter",".test",function(event){
        console.log("test");
    })

    //能动态绑定事件
    var str = '<button>按钮+</button>';
    $(".container").append(str);

</script> 

5.jq对象与原生dom的相互转化

    <div class="box" style="width: 100px;height: 100px;background-color: red;"></div>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

    var dom = document.querySelector(".box");
    console.log(dom);   // <div class="box"></div>

    var $obj = $(".box");
    console.log($obj);  //jquery对象

    //元素对象转jq对象
    var dom_$obj=$(dom);
    console.log(dom_$obj);//jquery对象

    //jq对象转元素对象
    var $obj_dom=$obj[0];
    console.log($obj_dom);// <div class="box"></div>
    var $obj_dom=$obj.get(0);
    console.log($obj_dom);// <div class="box"></div>

</script>   

6.jq隐式遍历的特点

• 这里列举css方法有隐式遍历的功能
• 还有addClass,removeClass,toggleClass,hasClass等也有隐式遍历的特点

1. 例子1：

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script src='./jquery/jquery-3.6.0.min.js'></script>
    <script>
    // 需求：
        // 设置5个按钮的背景色

    // JQ:
    $("button").css("backgroundColor","deepskyblue");



    // JS:
    // var buttons = document.querySelectorAll("button");
    // for(var i = 0 ; i < buttons.length ; i ++){
    //     buttons[i].style.backgroundColor = "yellowgreen";
    // }


    // 总结：
        // jquery获取元素，返回的是jquery对象
        // css 方法是由jquery对象调用
        // css 方法封装过程，已经对获取的元素进行了遍历
        // jq其中一个特点：隐式迭代（函数封装，内部循环）
    </script>

2. 例子2：

    <style>
        ul {
            width: 900px;
            height: 100px;
            display: flex;
            align-items: center;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul li {
            width: 120px;
            height: 40px;
            border: 1px solid #ccc;
            margin: 0 5px;
            cursor: pointer;
            text-align: center;
            line-height: 40px;
        }
    </style>

    <ul class="nav-list">
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
    </ul>


<script src="../jquery/jquery-3.6.0.min.js"></script>
<script>
    // 描述：
    // 当前点击的标签设置高亮（字体、背景、边框），不是当前点击的标签移除高亮

    // 编码：
    // jquery
    // 获取元素并且绑定事件
    $(".nav-list").on('click','li',function(){
        // console.log(this);// 事件源
        // console.log($(this));// 事件源对应的jquery对象
        // $(this).css().siblings() 获取除了当前点击的标签以外的兄弟元素
        $(this)
        .css( "backgroundColor","yellowgreen")
        .siblings()
        .css("backgroundColor","white")
    })

</script>

<script>
    // 编码：
    // javascript
    var items = document.querySelectorAll(".nav-list li");
    // 循环标签数组
    for(var i = 0 ; i < items.length ; i ++){
        items[i].onclick = function(){
            // 排他思想
            for(var j = 0 ; j < items.length ; j ++){
                items[j].style.backgroundColor = "white";
            }
            // 设置当前点击的标签高亮
            // this 在当前函数作用域（事件调用者）
            this.style.backgroundColor = "deepskyblue";
        }
    }
</script>

7.jq链式编程的特点

• 像上面的例子中的 “$(this).css( “backgroundColor”,“yellowgreen”).siblings().css(“backgroundColor”,“white”)” 就是链式编程

1. 例子：

    <style>
        button {
            border: 1px solid #ccc;
            padding: 15px 20px;
        }
    </style>
    <button>按钮1</button>
    <button>按钮2</button>
    <button class="btn-demo">按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

<script src="../../jq/jquery-3.6.0.min.js"></script>
<script>

    $(".btn-demo").css("backgroundColor","red").css("color","white").siblings("button").css("borderRadius","20px");

</script>   

2. 模仿jq的链式编程的特点去封装自己的jq

<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ 学习 </title>
    <style>
        button {
            border: 1px solid #ccc;
            padding: 15px 20px;
        }
    </style>
</head>
<body>

    <button>按钮1</button>
    <button>按钮2</button>
    <button class="btn-demo">按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script src='./jquery/jquery-3.6.0.min.js'></script>
    <script>
        // jQuery的链式编程：
        // $(".btn-demo").css("backgroundColor","red").css("color","white").siblings("button").css("borderRadius","20px")


        // 自定义工具
        // ====================================
        // 定义构造函数
        var Foo = function(selector){
            this.element = document.querySelector(selector);
            this.arr = [this.element]
        }
        Foo.prototype.css = function(prop,value){
            // 判断数组是否有值
            if(this.arr.length != 0 ){
                for(var i = 0 ; i < this.arr.length ; i ++){
                    // 设置css属性和属性值
                    this.arr[i].style[prop] = value;
                }
            }
            // 实现链式编程，需要该实例对象，可以返回当前函数作用域的this
            // 这是实现链式编程的关键代码
            return this;
        }
        Foo.prototype.siblings = function(){
            var el = this.element.parentElement;
            var elements =  el.children;
            this.arr = [];
            for(var i = 0 ; i < elements.length ; i ++){
                if(elements[i] == this.element){
                    // 跳出当前这个循环
                    continue;
                }
                this.arr.push(elements[i]);
            }
            // 这是实现链式编程的关键代码 
            return this;
        }
        // 原生JS实现链式编程
        function myjQuery(selector){
            // 返回一个构造函数的实例对象（属性和方法）
            return new Foo(selector);
        }
        window.myjQuery = window._ = myjQuery;
        // =====================================


        // 自定义的myjQuery函数，实现链式编程的操作
         _(".btn-demo").css("backgroundColor","red").css("color","white").siblings().css("borderRadius","20px")


    </script>
</body>

</html>

• 链式编程的特点是：在函数调用完成后得return一个this,即return jq对象本身