11.58 Event

11.581 Event Binding Method and Unbinding

Binding events:

// Binding mode 1:
$('.box1').click(function () {
    alert('Binding Mode I')
});
​
// Binding mode 2:
$('.box1').on("click",function () {
    alert('Binding Mode I')
});
​
// Binding mode 3:
$('.box1').bind('click',{'a':'b'} function (e) {
    alert('Binding Mode II');
    console.log(e.data);
});
​
$('.box1').bind('mouseover mouseout', function () { // Bind multiple events to do the same thing
    console.log('Bind multiple events to do the same thing')
});
$('.box1').bind({
    'mouseup': function () {
        console.log('mouseover');
    },
    'mousedown': function () {
        console.log('mouseout');
    }
});

Unbundling events:

// Remove events, unbind Without parameters, all events are removed
setTimeout(function () {
    $('.box1').unbind('mouseover');
}, 3000);
​
setTimeout(function () {
    $('.box1').unbind();
}, 10000)
​
.off("click",function(){
    xxxxx
})

11.582 Binding Event Example

click Event: click

// click and dblclick There should only be one, most of which are click events
$('.box1').click(function (event) 
    // console.log(event.type);                 // The type of event.type event is: click
    console.log(event.target);                  // event.target Refers to the element clicked.
})
$('.box1').dblclick(function (event) {
    console.log(event.target);                  // event.target Refers to the element clicked.
})

Mouse: mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave

$('.box1').mousedown(function (event) {
        console.log('Follow the left mouse button and don't let go');
    });
$('.box1').mouseup(function (event) {
    console.log('Release your hands by pressing the left mouse button');
});
​
$('.box1').mousemove(function (event) {
    console.log('Mobile mouse', event.pageX, event.pageY);
});
$('.box1').mouseover(function (event) {
    console.log('Elements and their children are triggered when the mouse moves in,Current div Yes,', event.target.innerText);
});
​
$('.box1').mouseout(function (event) {
    console.log('Elements and their children are triggered when the mouse leaves. Current div Yes,', event.target.innerText);
});
$('.box1').mouseenter(function (event) {
    console.log('Elements are triggered when the mouse moves in(Not related to child elements),Current div Yes,', event.target.innerText);
});
$('.box1').mouseleave(function (event) {
    console.log('Elements are triggered when the mouse moves in(Not related to child elements)，Current div Yes,', event.target.innerText);
});

For input boxes: focus, blur, input

Input can detect the content changes of textarea, input:text, input:password, input:search in real time, but the version below IE9 does not support it. It needs to be replaced by IE-specific onpropertychange event. If you use jQuery library, you can use on directly to bind these two events at the same time.

$('#inp').on("focus", function () {
    console.log('Mouse Focus');
});
$('#inp').on("blur", function () {
    console.log('Mouse loses focus');
});
// When input Real-time trigger when the value of the box changes
$("#inp").on("input", function () {
    console.log($(this).val());
})
$("#i1").on("input propertychange", function () {
    alert($(this).val());
  })

Keyboard: keydown, keyup

$('#inp').keydown(function (e) {
    console.log(e.keyCode);
});
$(window).on("keydown", function (e) {      // Get the user to press that button
    console.log(e.keyCode);
    if (e.keyCode === 16){
        flag = true;
    }
});
​
$('#inp').keyup(function (event) {          // Binding an event with a button raised
    console.log('Keyboard keys pop up');
});
$(window).on("keyup", function (e) {
    console.log(e.keyCode);
    if (e.keyCode === 16){
        flag = false;
    }
});

change:

//Form Events change
$('#inp').change(function () {
    console.log(this.value);            //When you lose focus, you get the value.
});
$('input[name=sex]').change(function (event) {
    console.log(this.value);
});
$('#select').change(function () {
    console.log(this.value);
});

Check the checkbox box box: select

//Form Events select,CheckBox Triggered when the box is selected
$('#inp1').select(function () {
    console.log(this.value);
});
$('#inp2').select(function () {
    console.log(this.value);
});

Submit event: submit

//Form Events submit
$('#form').submit(function (event) {
console.log($('input[name=user]').val());
console.log($('input[name=pwd]').val());
event.preventDefault();
});

hover: hover events cannot be bound with on

//hover Event
$(".father").hover(                         // Mouse to.father Up to date.son Add a.show 
    function () {
        $(this).find(".son").addClass("show");
    },
    function () {                            // Mouse Move Out.father Up to date.son Remove one.show 
        $(this).find(".son").removeClass("show");
    })

11.583 Event Bubble Application Event Delegation

Additional events cannot be used to add events dynamically. For example, when we add or delete tables, every new line of content needs to be rebounded. Event delegation can solve this problem.

Event delegation is based on the principle of event bubbling, using parent tags to capture events with child tags.

$('ul').on('mouseover','li',function (e) {
    $(e.target).css('background-color','#ddd').siblings().css('background-color','white');
    // e.stopPropagation();
    return false;
})
​
$("table").on("click", ".delete", function () {
  // Delete Button Binding Events
})

11.584 Page Loading Completes Execution

$(document).ready(function(){
    Write your JS code here.
})
​
Abbreviation:
$(function(){
    You write your code here.
})

The difference from window.onload() function is that window.onload() function has overlay, and it can only be called once after the image resource is loaded. This entry function of jQuery has no function overlay, and can be called after the document is loaded (it is recommended to use this function), and it can be used many times.

11.59 Animation Effect

1. show() shows the hidden syntax of matching elements: show(speed,callback) 
Parameters:
speed: A string ('slow','normal','fast') representing one of the three predetermined speeds or a millisecond value representing the length of the animation (e.g., 1000 milliseconds == 1 second)
callback: A function that executes at the completion of an animation, once per element
2,hide
hide(speed,callback) is similar to show in that it represents elements that are hidden and displayed. You can dynamically control the display and hiding of elements by show () and hide () methods
3,toggle
If the element is visible, switch to hidden; if the element is hidden, switch to visible.
​
1. SleDown dynamically displays all matching elements by changing the height (increasing downwards). When the display is complete, it triggers a callback function whose usage and parameters are similar to those above.
2. SleUp dynamically hides all matching elements by changing the height (decreasing upward), and optionally triggers a callback function when the hiding is completed. The usage and parameters are similar to those above.
3. SleToggle switches the visibility of all matching elements by height change, and optionally triggers a callback function after switching is completed, similar to toggle usage.
​
1. fadeIn/fadeOut achieves fade-in/fade-out effect of all matching elements by changing opacity, and triggers a callback function optionally after animation is completed. This animation only adjusts the opacity of the elements, which means that the height and width of all matched elements will not change.
2. fadeTo adjusts the opacity of all matching elements gradually to the specified opacity, and triggers a callback function optionally after the animation is completed. This animation only adjusts the opacity of the elements, which means that the height and width of all matched elements will not change.
3. fadeToggle switches fade-in and fade-out effects of all matching elements by changing opacity, and triggers a callback function optionally after animation is completed. This animation only adjusts the opacity of elements, that is to say, the height and width of all matching elements will not change. The effect of fading in and out is to use this method.

animate,stop,delay

1. The concept of animate: Functional grammar for creating custom animation: animate(params,[speed],[fn])
Parameters:
params: A set of style attributes and their values that contain animation attributes and final values
speed: A string ("slow", "normal", "fast") or a millisecond value representing the length of an animation (e.g. 1000)
fn: A function that is executed at the completion of the animation, with each element executed once.
​
2. Stop concept: Stop all animation grammars that are running on specified elements: stop([clearQueue],[jumpToEnd])
Parameters:
clearQueue: If set to true, empty the queue. You can end the animation immediately.
gotoEnd: Make the currently executing animation complete immediately, reset the original style of show and hide, call callback functions, etc.
​
3. Delay concept: Operational grammar for delaying: delay(1000), one second later

11.510 .each()

// For each li Label Addition class="c1"
$("li").each(function(){
  $(this).addClass("c1");
});
​
//Use built-in $.each()Iteration
var arry=[11,22,33,44];
$.each(arry,function(k,v){
    console.log(k,v);
});

Note: The jQuery method returns a jQuery object and traverses elements in the jQuery Collection - a process known as implicit iteration. When this happens, it usually does not need to explicitly cycle the. each() method.

That is to say, there is no need to use each() method in the above example. Just write it as follows:

$("li").addClass("c1");  // Unified operation for all labels

Terminate the each loop

return false；

11.511 .data()

data(key, value): Store any relevant data / save some state on the matched elements.

$("div").data("k",100);     //To all div Labels are stored with a name k，Value 100

data(key): Returns the value of the data store for the given name of the first element in the set of matching elements

$("div").data("k");         //Return to the first div Save in the label"k"Value of 100

removeData(key): Remove data stored on elements without key parameters to remove all saved data

$("div").removeData("k");    //Remove elements from storage k Corresponding data