11.58 Event
11.581 event binding methods and unbundling
Binding events:
// binding mode a: $ ( 'box1.') The Click (. Function () { Alert ( 'binding, a' ) }); // bind two ways: $ ( 'box1.') ON. ( "the Click", function () { Alert ( 'binding, a' ) }); // bind three ways: . $ ( '. box1') the bind ( 'the Click', { 'a': 'B '} function (E) { Alert ( ' two way bindings' ); the console.log (e.data); }); $ ( '.box1') the 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'); } });
Unbinding events:
// remove the event, unbind not remove all event parameter represents the setTimeout ( function () { $ ( '.box1') the unbind ( 'mouseOver'. ); }, 3000 ); the setTimeout ( function () { $ ( '.box1' ) .unbind (); }, 10000 ) .off ( "the Click", function () { XXXXX })
11.582 Examples of binding events
Click event: click
// the Click of a dblclick should only exist, mostly click event $ ( 'box1.') The Click (. Function (Event) // console.log (event.type); // event type event.type It is: the click the console.log (event.target); // event.target refers to that element clicked }) $ ( '.box1') DblClick (. function (Event) { the console.log (event.target); // event.target refers to that element clicked })
鼠标：mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
$ ( 'box1.') mouseDown. ( function (Event) { the console.log ( 'in accordance with the left mouse button grimdeath' ); }); $ ( '.box1') mouseUp (. function (Event) { the console.log ( 'in accordance with the left mouse button to let go' ); }); $ ( '.box1') mouseMove (. function (Event) { the console.log ( 'mouse move' , event.pageX, event.pageY); }); $ ( '.box1') mouseOver. ( function (Event) { the console.log ( 'element and the child elements will be triggered when the mouse moved, the current div is:' , event.target.innerText); }) ; $ ( '.box1').mouseout(function (Event) { the console.log ( 'element and the child elements will be triggered when the mouse leaves the current div is:' , event.target.innerText); }); $ ( '.box1') MouseEnter. ( function (Event) { the console.log ( 'elements are triggered when the mouse moved (regardless of the child element), the current div is:' , event.target.innerText); }); $ ( '.box1') .mouseleave ( function (Event) { the console.log ( 'elements are triggered when the mouse moved (regardless of the child element), the current div is:' , event.target.innerText); });
For input box: focus, blur, input
input real-time detection of the TextArea , input: text , input: password , input: Search content changes in these elements, but IE9 following versions do not support the need to use IE-specific onpropertychange events alternative, using jQuery library if used directly on at the same time tie these two events can be scheduled
. $ ( '# InP') ON ( "Focus", function () { the console.log ( 'mouse focus' ); }); $ ( '#inp') ON ( "Blur",. function () { Console .log ( 'mouse loses focus' ); }); // when the value input box changes, real-time triggering $ (. "# InP") ON ( "input", function () { the console.log ($ ( the this ) .val ()); }) $ ( . "# I1") ON ( "INPUT propertyChange", function () { Alert ($ ( the this ) .val ()); })
Key: keydown, keyup
$ ( '# InP') keyDown (. function (E) { the console.log (e.keyCode); }); $ (window) .on ( "keyDown", function (E) { // get the user presses the key the console.log (e.keyCode); IF (e.keyCode === 16 ) { In Flag = to true ; } }); ($ . '#inp') keyUp ( function (Event) { // bind a key event raised console.log ( 'keyboard key bounce' ); }); $ (window) .on ( "keyUp", function (E) { the console.log (e.keyCode); IF (e.keyCode === 16){ flag = false; } });
change:
// form events Change $ ( '# InP') Change. ( Function () { the console.log ( the this .Value); // get lost focus value }); $ ( 'INPUT [Sex = name]' ) .change ( function (Event) { the console.log ( the this .Value); }); $ ( '#select') Change (. function () { the console.log ( the this .Value); });
Select the checkbox box: select
// form event select, triggered when the box is checked CheckBox $ ( '# INP1') the SELECT (. Function () { console.log ( the this .Value); }); $ ( '# INP2') the SELECT (. Function ( ) { the console.log ( the this .Value); });
Submit an event: submit
//表单事件submit $('#form').submit(function (event) { console.log($('input[name=user]').val()); console.log($('input[name=pwd]').val()); event.preventDefault(); });
hover: You can not use on binding hover event
// hover event $ (. "Father"). Hover ( // make .son add a .show when the mouse is moved .father function () { $ ( the this ) .find (. "Son"). AddClass ( " Show " ); }, function () { // the mouse is removed allows .son remove a .father the .Show $ ( the this ) .find (" Show Son ".") removeClass (. " ); })
11.583 Application of event bubbling event delegate
Add an event can not be used to increase the dynamic events, such as before when we make additions and deletions to the table, each new line of content need to re-bind the event, based on an event delegate can solve the problem
Event delegates is through the principle of event bubbling, using the parent tag to capture the sub-label of an event
$('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 () {
// 删除按钮绑定的事件
})
11.584 page load has finished executing
$ (the Document) .ready ( function () { here to write your JS code ... }) shorthand: $ ( function () { you write your code here })
And the difference between window.onload () function: window.onload () function has covered the phenomenon, must wait for the picture to call after loading the resources to complete, and can only be used once; jQuery this phenomenon entrance function has no cover, the document has finished loading then you can call (recommended to use this function), can be used multiple times
11.59 animation
. 1 , Show () show hidden matching elements Syntax: show (speed, callback) Parameters: Speed: one of the three predetermined velocity string ( 'SLOW', 'Normal', 'FAST') or represent long animation ms value (eg: 1000 ms == 1 second) the callback: a function performed when the animation is completed, executed once for each element 2 , hide hide (Speed, the callback) using a method analogous with the show, showing hidden display elements. Can show () and hide () method to dynamically control the display of hidden elements . 3 , Toggle If the element is visible, the hidden switch; if the element is hidden, invisible switched. . 1 , slideDown (increasing downwards) to dynamically displayed by the height variation of all the elements match, trigger a callback function usage and parameters after completion similar with the above 2 , slideUp by change in height (decreasing upward) to dynamically hide all the elements match, after completion of hiding and firing an optional callback function. Similarly with the above parameters and usage . 3 , slideToggle to toggle the visibility of all matched elements by adjusting their height, and firing an optional callback function with the use of similar toggle switch after the completion of 1, fadeIn / fadeOut achieved by their opacity all matched elements fade in /Fade-out, and after completion firing an optional callback function. This animation only adjust the opacity of the elements, that is to say the height and width of all the elements that match will not change 2 , fadeTo the opacity of all matched elements to adjust the opacity specified in a progressive manner, and after completion can Alternatively trigger a callback function. This animation only adjust the opacity of the elements, that is to say the height and width of all matched elements will not change. 3, fadeToggle to switch through their opacity fade in and fade out all matched elements effect, and after completion firing an optional callback function, the animation only adjust the opacity of the element, the element that is the height of all matches and width will not change. Fade effect to achieve this is to use the square
animate、stop、delay
. 1 , Animate concepts: function syntax used to create custom animations: animate (params, [speed] , [fn]) Parameters: the params: a set of style properties comprising as an animation property values and final set of values and their speed : the speed of one of the three predetermined character string ( "SLOW", "Normal", or "FAST") long or represent animation number of milliseconds (eg: 1000 ) Fn: function to execute the animation is complete, each element performs once. 2 , the concept of STOP: stop all running on the specified animation element Syntax: stop ([clearQueue], [ jumpToEnd]) Parameters: clearQueue: If set to true, then the queue is cleared. Animation can end immediately. gotoEnd: Let animation currently being executed is completed immediately and reset the show and hide the original style, callback function, etc. 3, delay concept: the syntax used for operating the delay: delay (1000), one second after doing behind operating
11.510 .each()
// add each label li = class "C1" $ ( "li") each (. Function () { $ ( the this ) .addClass ( "C1" ); }); // use the built $ .each ( ) iterating var ARRY = [11,22,33,44 ]; $ .each (ARRY, function (K, V) { the console.log (K, V); });
Note: jQuery method returns a jQuery object, through the elements jQuery collection - a process called implicit iteration. When this happens, it usually does not need to explicitly .each cycle () method
In other words, the above example is not necessary to use each () method, like this directly written on it:
$ ( "li") addClass ( "c1");. // do unified action on all labels
Termination of each cycle
return false；
11.511 .data()
.data (key, value): on the matched elements to store arbitrary data / save some status.
$ ( "div") the Data ( "k", 100);. // to save all div tags called k, is 100
.data (key): value of the data stored in the first element of the returned name matches the set of elements in a given
$ ( "div") Data ( "k");. // returns the saved first div tag "k" value of 100
.removeData (key): remove the data stored on the element, without key parameter indicates the removal of all stored data
$ ( "div") removeData ( "k");. // removable data storage element corresponding to k