jQuery事件操作

1. 事件绑定

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery.min.js"></script>
    <style>css">
        div {
            width: 200px;
            height: 200px;
        }

        .div1 {
            background-color: red;
            margin-bottom: 20px;
        }
        .div2 {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol></ol>
    
    <script>
        $(function () {
            //1. 单个事件注册
            $(".div1").click(function () {
                $(this).css('background', 'green');
            });


            //2. 在一个元素上绑定一个或多个事件处理函数: on( { ... } )
            $(".div2").on({
                click: function() {
                    $(this).css('background', 'green');
                },
                mouseover: function() {
                    $(this).css('background', 'yellow');
                },
                mouseleave: function() {
                    $(this).css('background', 'purple');
                }
            }); 
                //事件处理程序一样
            // $("div").on("mouseover mouseleave", function () {
            //     $(this).css('background', 'green');
            // })


            //3. on实现事件委派
            // 把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素 ; 
            // click是绑定在ul上的，但是触发的是ul上的小li ; 
            // 在此之前有bind(), live(), delegate()等方法来处理事件绑定或者是事件委派, 新版本提倡用on()进行替代; 
            // $("ul li").click();          //原来
            $("ul").on("click", "li", function () {
                console.log(666);
            }); 


            //4. on可以给动态创建的元素绑定事件
            /*
                $("ol li").click(function() {
                    console.log(222);   
                })   //此种方法不行(因为此时还没有小li), 也即是click不能给动态创建的小li绑定事件
            */

            $("ol").on("click", "li", function () {
                console.log(222);
            })      //用on()，可行
            var li = $("<li>后来创建的小li</li>");
            $("ol").append(li);
        }); 
    </script>
</body>

</html>

请添加图片描述

2. 事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery.min.js"></script>
    <style>css">
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <ol>
        <li>fs</li>
        <li>sfs</li>
        <li>ksdf </li>
    </ol>
    <p>HelloWorld</p>
    <!-- 
        off() -> 方法可以移除通过on()方法添加的事件处理程序; 
        one() -> 有的事件只想触发一次, 可以使用one()来绑定事件; 
     -->
    <script>
        $(function(){
            $("div").on({
                click: function() {
                    console.log('点击');
                },
                mouseover: function() {
                    console.log('经过');
                }
            });

            $("ol").on("click","li",function() {
                console.log(111);
            })


            //1.解绑
            // $("div").off();          // 解除绑定到div上的所有事件处理
            $("div").off("click");      // 解除绑定到div上的click事件
            $("ol").off("click","li");  // 解除绑定到小li上的click事件

            
            //2. one() 
            $("p").one("click", function () { 
                console.log('只触发一次!');
             }); 
        });
    </script>
</body>
</html>

请添加图片描述

3. 自动触发事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery.min.js"></script>
    <style>css">
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="div0"></div>
    <div id="div1"></div>
    <div id="div2"></div>
    <input type="text" name="" id="">
    <!-- 
        1. elem.click(); 
        2. elem.trigger("click"); 
        3. elem.triggerHandler("click"); 
     -->
    <script>
        $(function () {
            $("#div0").on("click", function () {
                console.log('div0');
            });
            $("#div1").on("click", function () {
                console.log('div1');
            });
            $("#div2").on("click", function () {
                console.log('div2');
            });
            $("input").on("focus", function () {
                console.log('自动触发了');
                $(this).val('你好吗');
            });

            //自动触发
            //1.元素.click()
            $("#div0").click();

            //2.元素.trigger("type")
            $("#div1").trigger("click");

            //3.元素.triggerHandler("type"): 不会触发元素的默认行为（比如：input中输入框的默认光标闪烁）
            $("#div2").triggerHandler("click");
            $("input").triggerHandler('focus'); //光标不闪了

        })
    </script>
</body>

</html>

请添加图片描述

4. 事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jQuery.min.js"></script>
    <style>css">
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- 
        事件被触发，就会有事件对象的产生！
     -->
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log('点击了document');
            }); 

            $("div").on("click", function(event) {
                console.log(event);         // 事件对象
                console.log('点击了div');
                event.stopPropagation();    
                    //阻止冒泡前:> 点击了div -> 点击了document
                    //阻止冒泡后:> 点击了div
            }); 
        }); 
    </script>
</body>
</html>