jQuery编程学习2（ jQuery 事件注册、处理、对象）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .current {
            background-color: purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function () {
            // 1.单个事件注册
            // $("div").click(function () {
            //     $(this).css("background", "purple");
            // });
            // $("div").mouseenter(function () {
            //     $(this).css("background", "skyblue");
            // });
            // 2.事件处理on
            // $("div").on({
            //     mouseenter: function () {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function () {
            //         $(this).css("background", "purple");
            //     },
            //     mouseleave: function() {
            //         $(this).css("background", "blue");
            //     }
            // })

            $("div").on("mouseenter mouseleave", function () {
                // alert(11);
                $(this).toggleClass("current");
            })

            // (2) on 可以实现事件委托（委派）
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // click事件是绑定在ul上面的，只有一个ul绑定了事件对象，但是触发的对象是ul里面的小li
            
            // （3） on可以给 未来 动态创建的元素绑定事件
            // $("ol li").click(function() {
            //     alert(123);             // 没有反应，因为点击事件是在li创建之前
            // })
            $("ol").on("click", "li", function() {
                alert(123);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

</html>

案例：发布微博案例！！！！！

① 点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。
② 点击的删除按钮，可以删除当前的微博留言。

HTML、CSS代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }

        input {
            float: right;
        }

        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            

        })
    </script>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

</html>

jQuery代码：

 $(function () {
            // ① 点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
            $(".btn").on("click", function () {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
                $("ul").prepend(li);
                li.slideDown();        // 小li向下滑动
                $(".txt").val("")  // 文本框清空
            })

            // ② 点击的删除按钮，可以删除当前的微博留言。
            // $("ul a").click(function() {
            //     alert(11);                // 不会弹出11  因为此时的click不能给动态创建的a添加事件
            // })
            // on可以给动态创建的元素绑定事件
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {        // 这里的this表示a，$(this).parent()即li， slideUp效果中的回调函数function是在上拉结束之后再执行
                    $(this).remove();      // 这里的this 已经是 li 了
                });             
            })
        })

2.2 事件处理 off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off()                // 解绑p元素 所有 事件处理程序
$("p").off( "click")       // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托

如果有的事件只想触发一次，可以使用 one() 来绑定事件。

        $(function() {
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log("我鼠标经过了");
                }
            });
            $("ul").on("click", "li", function() {        // 事件委托
                alert(11);
            })
            // 1.事件解绑  off
            // $("div").off();         // 这个是解除了div身上的 所有 事件
            $("div").off("click");        // 只解除了div身上的click事件
            $("ul").off("click", "li");      // 解除了 事件委托
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(123);
            })
            
        })

2.3 自动触发事件 trigger()

（3.4.9 -- 04）

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click() // 第一种简写形式元素.事件()

element.trigger("type") // 第二种自动触发模式 type即事件

$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

element.triggerHandler(type) // 第三种自动触发模式

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别

        $(function () {
            $("div").on("click", function () {
                alert(11);
            })
            // 自动触发事件
            // 1. 元素.事件()   会触发元素的默认行为
            // $("div").click();
            // 2. 元素.trigger("事件")   会触发元素的默认行为
            // $("div").trigger("click"); 
            $("input").trigger("focus");      // 有光标闪烁，focus的默认行为
            // 3. 元素.triggerHandler("事件")  就是不会触发元素的默认行为
            $("div").triggerHandler("click");
            $("input").on("focus", function() {
                $(this).val("你好");
            });
            // $("input").triggerHandler("focus");    // 没有光标闪烁，不会触发focus的默认行为
        });

3. jQuery 事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {})

// 回调函数中的event或者e就是我们的事件对象

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            });
            $("div").on("click", function(event){
                // console.log(event);
                console.log("点击了div");        // 事件冒泡，点击了div，先打印出"点击了div"，之后再打印出 "点击了document"
                event.stopPropagation();         // 阻止事件冒泡  只打印了 "点击了div"
            });  
        }

夏天的遥遥漓曦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery编程学习2（ jQuery 事件注册、处理、对象）

1. jQuery 事件注册单个事件注册2. jQuery 事件处理2.1 事件处理 on() 绑定事件语法：on() 方法优势1：可以绑定多个事件，多个处理事件处理程序.on() 方法优势2：可以事件委派操作。on() 方法优势3：可以给未来动态生成的元素绑定事件案例：发布微博案例！！！！！HTML、CSS代码jQuery代码：2.2 事件处理 off() 解绑事件2.3 自动触发事件 trigger()3. jQuery 事件对象
复制链接

扫一扫