Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
Address: https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4

table of Contents

jQuery events

jQuery event registration

Single event registration

Event handling on() binding event

Case: Post Weibo Case

Event handling off() unbind event

Automatic trigger event trigger()

jQuery event object

jQuery events

jQuery event registration

Single event registration

element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
Other events are basically the same as the original.

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
$("div").click(function() {
    $(this).css("background", "purple");
});
$("div").mouseenter(function() {
    $(this).css("background", "skyblue");
});

Event handling on() binding event

The on() method binds one or more event handlers to the matched element
element.on(events,[selector],fn)
events: One or more event types separated by spaces, such as "click" or "keydown".

selector: The child element selector of the element.

fn: The callback function is the listening function bound to the element.
$("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() {
    $(this).toggleClass("current");
});
Operations can be delegated to events . The definition of event delegation is to bind the event originally added to the child element to the parent element, which is to delegate the event to the parent element.
$('ul').on('click', 'li', function() {
     alert('hello world!');
});
click is bound to ul, but the triggered object is the small li in ul

Before this, there are methods such as bind(), live() delegate() to handle event binding or event delegation. For the latest version, please replace them with on .

Dynamically created elements, click() cannot bind events, on() can bind events to dynamically generated elements
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

Case: Post Weibo Case

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

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

            // 2.点击的删除按钮，可以删除当前的微博留言li
            // $("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件
            //     alert(11);
            // })
            // on可以给动态创建的元素绑定事件
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })

        })
    </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>

Event handling off() unbind event

The off() method can remove the event handlers added by the on() method .
$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托
If some event only wants to be triggered once, you can use one() to bind the event .

Automatic trigger event trigger()

Some events want to be triggered automatically, for example, the auto-play function of the carousel is the same as clicking the button on the right. You can use the timer to automatically trigger the button click event on the right side, without the mouse click trigger.
element.click() // 第一种简写形式
element.trigger("type") // 第二种自动触发模式
element.triggerHandler(type) // 第三种自动触发模式
The triggerHandler mode does not trigger the default behavior of the element , which is the difference from the previous two.
$("div").on("click", function() {
    alert(11);
});

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

jQuery event object

When an event is triggered, an event object will be generated.

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

Prevent default behavior: event.preventDefault() or return false
Stop bubbling: event.stopPropagation()

$(function() {
    $(document).on("click", function() {
        console.log("点击了document");

    })
    $("div").on("click", function(event) {
        // console.log(event);
        console.log("点击了div");
        event.stopPropagation();
    })
})

(JavaScript learning record): jQuery event

jQuery events

jQuery event registration

Single event registration

Event handling on() binding event

Case: Post Weibo Case

Event handling off() unbind event

Automatic trigger event trigger()

jQuery event object

Guess you like