Learn the Web from scratch JQuery (vi) binding events for elements with multiple identical events

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

One, the element is bound more than the same event 1, mode one

    $("#btn").click(function () {        console.log("click1");    }).click(function () {        console.log("click2");    }).click(function () {        console.log("click3");    });

2, Mode two

    $("#btn").bind("click",function () {        console.log("bind:click1");    }).bind("click",function () {        console.log("bind:click2");    }).bind("click",function () {        console.log("bind:click3");    });

Note: The following uses the Bind object, only the last identical binding event is executed.

    $("#btn").bind({        "click": function () {            console.log("bind-obj:click1");        }, "click": function () {            console.log("bind-obj:click2");        }, "click": function () {            console.log("bind-obj:click3");        }    });

Two, the difference between the element binding event

First, the conclusion: by invoking the event name and bind in a way that binds only the elements that existed before, the added element cannot bind the event, while the delegate and on bind elements in a way that can.

Example 1:

// 事件名       $("#btn").click(function () {        $("#dv").append($("<p>p标签</p>"));        $("p").click(function () {            alert("p被点了");        });        $("#dv").append($("<p>p标签2</p>"));    });// bind    $("#btn").click(function () {        $("#dv").append($("<p>p标签</p>"));        $("p").bind("click", function () {            alert("p被点了");        });        $("#dv").append($("<p>p标签2</p>"));    });

Clicking on the P tab 2 will not pop up the dialog box.

Example 2:

// delegate       $("#btn").click(function () {        $("#dv").append($("<p>p标签</p>"));        $("#dv").delegate("p", "click", function () {           alert("p被点了");        });        $("#dv").append($("<p>p标签2</p>"));    });// on       $("#btn").click(function () {        $("#dv").append($("<p>p标签</p>"));        $("#dv").on("click", "p", function () {           alert("p被点了");        });        $("#dv").append($("<p>p标签2</p>"));    });

The P-Tag added later will also be tied to the point-click event.

Iii. unbinding Events

What is the best way to unbind an event?

1. Bind Unbind Event

Grammar:

// 解绑单个或多个事件绑定事件的元素.unbind("事件名1 事件名2 ...");// 解绑所有的事件绑定事件的元素.unbind();

Ps:unbind can also 元素.事件名(事件处理函数) unbind a binding event.

2. Delegate Unbind Event

Grammar:

// 解绑子元素单个或多个事件父元素.undelegate("子元素", "事件1 事件2 ...");// 解绑子元素的所有事件父元素.undelegate();

The following notation is invalid: 父元素.undelegate("子元素"); You cannot remove all the events of a child element.

3. On Unbind Event

Grammar:

Note: All events for child elements are unbound. The following wording is invalid.父元素.off("子元素");

Learn the Web from scratch JQuery (vi) binding events for elements with multiple identical events