jquery Advanced Events

Learning Essentials:

• 1. Analog operation
• 2. Namespaces
• 3. Event delegation on, off, and one

First, analog operation

1.trigger method

<div style="width:200px;height:200px;background:red;">    type="button"value="点击"/></div>$("input").click(function () {    console.log($(this).val());});

Automatically trigger click events

$("input").trigger("click");

Shorthand

$("input").click(function () {    console.log($(this).val());}).trigger("click");

Passing parameters

$("input").click(function (e, data1, data2) {    console.log(data1[‘name‘", " + data2[1]);}).trigger("click", [{"name""zhang""age"22}, ["lisi"23]]);    // zhang, 23

You can also automatically trigger custom events $ ("input"). Bind ("Myclick", function () {Console.log ("custom Event"),//Custom event}). Trigger ("Myclick"); let's look at the shorthand method, Nothing, sneak lazy.

$("input").bind("click"function () {    console.log("简写的模拟事件");     // 简写的模拟事件}).click();

2.triggerHandler method

In most cases, the usage of the two methods of trigger and Triggerhandler is similar, but there are differences
The first: the. Triggerhandler () method does not trigger the default behavior of the event, while. Trigger () will

<form action="http://www.baidu.com">    type="text" name="username"/>    type="submit" name="sub"/></form>$("input[name=sub]").trigger("click");     // 自动跳转到指定URL$("input[name=sub]").triggerHandler("click");

If you want to imitate triggerhander with trigger,

$("input[name=sub]").click(function (e) {    e.preventDefault();}).trigger("click");

The second: the. Triggerhandler () method affects only the first matched element, and. Trigger () affects all

<ul>    <li>item1</li>    <li>item2</li>    <li>item3</li></ul>$("ul li").click(function () {    console.log($(this).text());});$("ul li").trigger("click");       // 3个li都会被触发$("ul li").triggerHandler("click");    // 只有第一个li被触发

The third: the. Triggerhandler () method returns the return value of the current event execution, and if no return value is returned, undefined and. Trigger () Returns the JQuery object that currently contains the event trigger element (easy chaining concatenating call)

alert($(document).click(function (){    return"aaa";       // aaa}).triggerHandler("click"));alert($(document).click(function (){    return"aaa";       // [object Object]}).trigger("click"));

The fourth type:. Trigger () Bubbles when the event is created. But this bubbling is a custom event, and it's a mechanism for jquery to extend to the DOM, not DOM features. and. Triggerhandler () does not bubble.

<div style="width:300px; height:300px; background:red; "> <div style="width:200px; height:200px; Background:green; "> <div class="inner"style="width:100px; height:100px; Background:blue; ">inner</div> </div></div>var index =1;$("Div"). Bind ("MyEvent", function () {    Console.Log"index ="+ index++);}) $(". Inner"). Trigger ("MyEvent");//index = 1, index = 2, index = 3$(". Inner"). Triggerhandler ("MyEvent");//index = 1

Second, the name space

Sometimes, we want to remove the event. But it is often troublesome to remove an event with the same name as an element binding.
At this point, you can use the namespace of the event to resolve.

$(document).bind("click.abc"function () {    console.log("abc");})$(document).bind("click.123"function ()　{    console.log("123");});$(document).unbind("click.abc");       // 点击只是触发click.123$(document).trigger("click.123");

Iii. delegation of events
The event that the child element binds is bubbled to the parent element (or ancestor element), and then the related processing is done.
jquery has used and discarded the live (), Die (), and Delegate (), Undelegate () methods for fear of causing confusion
Unified by On (), Off (), and one () for event delegation

<div style="background:red;width:200px;height:200px;" id="box">    type="button"value="按钮"class="button" /></div>

Perform event delegation

$(".button").on("click"function () {    $(this).clone().appendTo("#box");});

Canceling event delegation

$(".button").off("click");

An event is automatically removed when the one binding element finishes execution, and can be triggered only once by the method

$(".button").one("click"function () {    $(this).clone().appendTo("#box");});

jquery Advanced Events