jquery Foundation Events

Learning Essentials:

• Binding events
• Shorthand Event
• Composite events

One, the binding event
Usage of bind (type, [data], FN)
Type indicates the event name of the binding, such as click, MouseUp, etc.
Data optional, which represents the extra data passed, which can be strings, arrays, objects, and numbers
FN event handler function

<divid="box">box</div>#box {    100px;    100px;    background: red;}

Click event-Bind anonymous function

$("#box").bind("click"function() {    alert($(this).text());     // box});

Extracting anonymous functions-passing parameters

$("#box").bind("click""123", fn);function fn(event) {    alert(event.data);      // 123}

Bind multiple events at the same time

$("#box").bind("mouseover mouseout"function () {    $(this).html(function (index, value) {        return"1";         // 之前的值 + "1"    });})

You can also bind objects

$("#box").bind({    "click"function () {        console.log("单击");    },    "mouseover"function () {        console.log("移入");    },    "mouseout"function () {        console.log("移出");    }});

To delete all events

$("#box").unbind();

Delete a specific event-just delete the Click event and remain for the over-out event

$("#box").unbind("click");

二、简写事件

First group: MouseOver, Mouseout, MouseEnter, MouseLeave

Over, out indicates mouse move-out trigger event

Enter, leave indicates that the mouse is passing through the trigger event

Difference: Enter, leave through child elements will not trigger events, and over, out will trigger events when passing through child elements
When the mouse moves into the value of the Div,strong innerHTML + "1";

<div style="width:200px;height:200px;background:green;">    <p style="width:100px;height:100px;background:red;"></p></div><strong></strong>

Moving into DIV and P triggers events

$("div").mouseover(function() {    $("strong").html(function (index, value) {        return"1";    });});

The event is triggered only when the div is moved in, and the move in P does not trigger the event

$("div").mouseenter(function () {    $("strong").html(function (index, value) {        return"1";    })});

Moving out of DIV and P will trigger events

$("div").mouseout(function() {    $("strong").html(function (index, value) {        return"1";    });});

The event is triggered only if the div is moved out, and P does not trigger the event

$("div").mouseleave(function () {    $("strong").html(function (index, value) {        return"1";    })});

The second group:. KeyDown (),. KeyUp () returns the KeyCode key, and. KeyPress () returns the CharCode character encoding.

<input type="text"/>$("input").keydown(function (e) {    console.log(e.keyCode);});$("input").keypress(function (e) {    console.log(e.charCode);});

Group Three: Cursor activation and loss
The. focus () and. blur () respectively indicate that the cursor is active and missing, and that the event firing time is the current element.
. Focusin () and. Focusout () also indicate that the cursor is active and missing, but the event firing time can be a child element.

<div style= "Width:200px;height : 200px;background:red; " > <input type= "text"  value= "" /></ div><strong></strong>$ ( "input" ). Focus (      function   ()  { //the current element triggers  $ ( "strong" ). HTML (" 123 ");}); $ ( "div" ). Focusin ( function   ()  { //child element trigger  $ ( "strong" ). HTML ( "456" ); });

III. Composite Events

1.ready (FN) when the DOM loads and triggers the event, no wait for pictures, videos, etc. to load

$().ready(function () {    alert("234");});

2.hover ([fn1,]fn2) when the mouse is moved in to trigger the first fn1, remove the trigger fn2

<div style="width:200px;height:200px;background:green;">    <p style="width:100px;height:100px;background:red;"></p></div><strong></strong>$("div").hover(function () {    console.log("移入"function () {    console.log("移出");});

Ps:hover internal encapsulation is mouseenter and MouseLeave, not mouseover and mouseout, that is, moving within the child element is not valid

jquery Foundation Events