1. Single event registration

grammar:

Other events are basically the same as the original. Such as mouseover, mouseout, blur, focus, change, keydown, keyup, resize, scroll, etc.

2. Event processing on() binding event

The on() method binds event handlers for one or more events on the matched elements.

grammar:

1. events: one or more event types separated by spaces, such as "click" or "keydown".

2. selector: The child element selector of the element.

3. fn: The callback function is the listening function bound to the element.

on() method advantage 1:

①Bind multiple events, multiple processing event handlers.

② If the event handlers are the same:

Note: Multiple events are separated by spaces;

on() method advantage 2:

Actions can be delegated by events. The definition of event delegation is to bind the event originally added to the child element to the parent element, that is, to delegate the event to the parent element.

The meaning of the above code: the click event click is bound to ul, but the trigger object is li. After clicking li, an event will bubble up to the father, and there is a click event on the father, so this program will be executed.

Before that, there are bind(), live() delegate() and other methods to handle event binding or event delegation. Please use on to replace them in the latest version.

Advantage 3 of the on() method: on() can bind events to dynamically generated elements

And click() cannot bind events to dynamically generated elements

Case: Publish Weibo case

Click the publish button, dynamically create a small li, put the content of the text box and the delete button, and add it to the ul

Click the Delete button to delete the current Weibo message.

<!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>

Reference: dark horse

jQuery event handling: on() binding event