jQuery basis (three) - Event articles
1, click jQuery mouse events of the event and dbclick
click method for monitoring the user clicks the operation, dbclick method for monitoring the user double-operation, the two methods usage and the like, it only introduces a click event, only take effect after the click release, and the same element can not bind at the same time click and dbclick events
Method One: $ ele.click ()
click no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.click (handler (eventObject))
click the parameter is a function (callback function), will perform the click function in the operation, if it contains this, this points to the object trigger event element
Method three: $ ele.click ([eventData], handler (eventObject))
click adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
// different data transfer functions
function data(e) {
$ (This) .find. ( 'P: last') html ( 'Data:' + e.data)
}
function a() {
$(".right").click(1111, data)
}
a();
Note: Only the mouse button key which is 1 (ie, the left mouse button) will implement an event bound
2, mousedown jQuery mouse events with the event mouseup
mousedown method for monitoring a user presses the mouse operation, only take effect after the mouse down, mouseup method for monitoring a user release the mouse operation, only the mouse take effect until release, the use of these two methods, and the like, so only introduction mousedown event.
Method One: $ ele.mousedown ()
mousedown no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.mousedown (handler (eventObject))
mousedown parameter is a function (callback function), it performs a function in the operation of the mouse down, if it contains this, this points to the object trigger event element
Method three: $ ele.mousedown ([eventData], handler (eventObject))
mousedown adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
Note: mousedown emphasize Press, mouseup stressed loosen; if you click and hold the left element, or will implement an event bound; the event will achieve any mouse button is bound; the key difference with which the event object, clicks the mouse button 1 which is a value, which clicks the mouse button value is 2, the tap value which is right-3
3, mousemove event of jQuery mouse events
Mousemove operating method for monitoring a user moves the mouse pointer, only the mouse pointer moves will take effect only in the event of the binding element in the region.
Method One: $ ele.mousemove ()
mousemove no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.mousemove (handler (eventObject))
Mousemove parameter is a function (callback function), the mouse pointer moves will execute a function in the operation, if it contains this, this points to the object trigger event element
// Bind event a mousemove
// modify the contents of the trigger
$(".aaron1").mousemove(function(e) {
$ (This) .find ( 'p: last') html. ( 'Movement position X:' + e.pageX)
})
方法三：$ele.mousemove ([eventData], handler(eventObject))
mousemove adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
Note: mousemove stressed the mouse pointer; if the processor to do any significant processing, or if the event there are multiple handlers, which may cause serious performance problems browser
4, mouseover jQuery mouse events of the mouseout event
mouseover method for monitoring a user mouse into operation only after the entry into force of the mouse into the region, mouseout method for monitoring a user mouse out of operation, only the mouse to remove the area after the entry into force of the process will handle the event event bubbling, this use two methods, and the like, so only introduce mouseover event.
Method One: $ ele.mouseover ()
mouseover no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.mouseover (handler (eventObject))
Mouseover parameter is a function (callback function), it performs a function in the operation of the mouse move, if it contains this, this points to the object trigger event element
Method three: $ ele.mouseover ([eventData], handler (eventObject))
mouseover adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
Note: mouseover emphasize the mouse moved into the area, mouseover emphasize the mouse to remove the area;
5, mouseenter jQuery mouse events of the event and mouseleave
This is the basic function of the fourth point, the theoretical knowledge is exactly the same, not further described herein. But their main difference is the fourth point could handle bubbling events, this is the fifth point does not handle bubbling events
6, hover the mouse events jQuery event
This event is a summary of the method of the fifth point, so he would not deal with a bubbling event, an event that is hovering, hovering (moved) within the element area, outside elements (removed)
方法：$ele.hover(
handlerIn(eventObject) ,
handlerOut(eventObject))
handlerIn (eventObject): trigger event function that executes when the mouse pointer enters the element
handlerOut (eventObject): trigger event function that executes when the mouse pointer leaves the element
7, focusin jQuery mouse events of the event and focusout
A method for monitoring a user focusin focusing operation element (e.g. input elements), the focusing element only after commencement. A method for monitoring a user focusout defocus operation element (e.g. input elements), and only becomes effective after the element out of focus. The two are very similar, so only introduce focusin event
Method One: $ ele.focusin ()
focusin no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.focusin (handler (eventObject))
focusin parameter is a function (callback function), it performs a function in the operation of the mouse move, if it contains this, this points to the object trigger event element
Method three: $ ele.focusin ([eventData], handler (eventObject))
focusin adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
// different data transfer functions
function fn(e) {
$ (This) .val (e.data) // assign to the input elements have val () method, not the value ()
}
function a() {
$. ( "Input: last") focusin ( '_T_ gung ji gung ji', fn)
}
a();
NOTE: focusin stressed focusing element; focusOut defocus stressed elements, whether or not calls itself the focus / defocus method, there are some functions performed operation,
8, focus jQuery form events of the blur event
A method for monitoring a user focus focusing operation element (e.g. input elements), the focusing element only after commencement. A method for monitoring a user blur defocus operating element (e.g. input elements), and only becomes effective after the element out of focus. The two are very similar, so only introduce focus event
Method One: $ ele.focus ()
focusin no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.focus (handler (eventObject))
focusin parameter is a function (callback function), it performs a function in the operation of the mouse move, if it contains this, this points to the object trigger event element
Method three: $ ele.focus ([eventData], handler (eventObject))
focus adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
Note: focus to emphasize the element focus; blur to emphasize the elements out of focus, only to call itself the focus / defocus method, and the focus is successful, the function will be performed inside part of the operation,
9, change of events jQuery form events
Only when the form elements (input elements, textarea element, select the element) after the change value
and out of focus
(elements for entering text, the other immediately trigger), trigger change event bound form
方法：$ele.change(handler(eventObject))
change the parameter is a function (callback function), form elements value changes again out of focus, it will perform the function in the operation, if it contains this, this points to the object trigger event element
10, select the event jQuery form events
select event can only be used <input> elements and <textarea> element. When the text of these two elements is selected will trigger select event
Method One: $ ele.select ()
focusin no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.select (handler (eventObject))
Select parameter is a function (callback function), it performs a function in the operation of the text is selected, if it contains this, this points to the object trigger event element
Method three: $ ele.select ([eventData], handler (eventObject))
select adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
11, submit the form events jQuery event
submit event can filter some of the data to do some necessary actions to prevent some of the default behavior of the browser.
There are four ways to trigger the submit event:
<input type="submit">、
<input type="image">、
<button type="submit">、
Some form element when acquiring focus, hit enter
Method One: $ ele.submit ()
submit no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.submit (handler (eventObject))
Submit argument is a function (callback function), it performs a function in the operation of the text is selected, if it contains this, this points to the object trigger event element
// Enter or click to submit the form, ban browser default Jump:
$('#target2').submit(function() {
alert ( 'capture submit expression action to prevent the page jump')
return false; // Jump prevent the browser's default behavior
});
Method three: $ ele.submit ([eventData], handler (eventObject))
submit adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData
Note: If you want to stop some of the default behavior of the browser, you can call the traditional event object e.preventDefault () to handle; also on the function returns false
12, keydown jQuery keyboard events of the event and keyup
keydown method for monitoring a user presses a keyboard operation, only the keyboard when it is pressed into effect, keyup release method for monitoring user's keyboard operation, only take effect after the keyboard release, the two methods usage and the like, so only introduction keydown event.
Method One: $ ele.keydown ()
keydown no arguments, only a binding event, can achieve other binding events in a function
Method two: $ ele.keydown (handler (eventObject))
keydown parameter is a function (callback function), it performs a function in the operation of the keyboard is pressed, if it contains this, this points to the object trigger event element
Method three: $ ele.keydown ([eventData], handler (eventObject))
keydown adds a parameter, and the above function is the same, except that a data transfer, i.e. eventObject.data = eventData; e.key e.which or a value (integer) input keyboard
Note: keydown emphasize Press, keyup stressed loosen; if you click and hold the left element, or will implement an event bound; can theoretically bind all the elements, generally used for form elements. keydown event: each time the contents are acquired before the input, the input is less than the current acquisition, which is addressed by the next knowledge points.
13, jQuery keyboard events of the keypress () event
keydown event triggers the text has not knocked into the text box
, then if the output text box in the keydown event in the text is the text obtained before the trigger keyboard events, while keyup event triggers the entire keyboard event has been completed, acquired It is the text after the event triggering the keyboard. He and keydown is the same.
keypress and keydown, keyup main differences:
Can only get a single character, you can not capture the key combination
The system can not respond to such a function key (delete, backspace)
Does not distinguish between numeric keypad and the main character keyboard
14, on () multi-event binding
All the above-mentioned time of their processing through a bottom is "on" methods to achieve. (On and bind is the same as recommended on)
Basic usage: .on (event, [selector], [data]) as: $ ele.on ( "click", function () {})
Events and the biggest difference is the above-mentioned
You can customize the name of the event
Multiple events bound to the same function: $ ele.on ( "mouseover mouseout", function () {}) // multiple events separated by spaces
Multiple events bound to different functions: $ ele.on ({
mouseover: function(){},
mouseout:function(){}
})
To pass the data to the handler
function greet( event ) {
alert ( "Hello" + event.data.name); // Hello Mu class network
}
$( "button" ).on( "click", {
name: "Mu class network"
}, greet );
15, on () advanced usage
Principal mechanisms: .on (event, [selector], [data], handler (eventObject))
Providing a selector on the second parameter selector, a simple case will be described
3 with reference to the following layer structure
<div class="left">
<p class="aaron">
<a> target node </a> // click on this element
</p>
</div>
Given by the following code:
$("div").on("click","p",fn)
Note: In the event binding on the top of the div element, when a user on a trigger element, the event will bubble up, would have been bubbling in the div element. If a second argument, the event met the selector element in the process of matching up the bubbling, the event will trigger a callback function
That is bubbling up matching element, callback function performed by the element range
16, unload event off () method
Event handler through on () bound
() Method to remove the binding by off (off and unbind is the same, it recommended off)
Binding two events
$ele.on("mouseover mouseout", function(){})
To lift one of the events
$ele.off("mouseover")
To lift all events
ele.off $ ()
17, the role of jQuery event object
You may borrow the object target property and bubbling event delegate ------- mechanism to achieve the same function to bind multiple events
We often see this is currentTarget properties of the object, event.target is the object that triggered the event
18, jQuery custom events trigger the event
example:
In jQuery bind a native event on the method by
$ele.on('click', function(){
alert ( "Trigger Event System")
});
The user must click on the element in order to trigger this event
$ele.trigger("click");
As long as this line of code to write, it is equivalent to implementation of the above click event
In addition to trigger events that can trigger browser, and also supports custom events and custom time also supports passing parameters
$('#elem').on('Aaron', function(event,arg1,arg2) {
alert ( "from Custom contact time")
});
$ ( '# Elem'). Trigger ( 'Aaron', [ 'parameter 1 "," parameter 2'])
trigger trigger browser event custom events differ?
-
- Custom event object, is a native jQuery analog implementation
- Custom events can pass parameters
jQuery basis (four) --- Animation articles
1, hide and show the hide and show elements in jQuery method
(changing the style display: none / block)
Element hiding method hide () elements display method show () both use very similar here to hide, for example
$ Ele.hide () directly Hide
$ Ele.hide (options) Animation hide will slowly change the width and height, resulting in page layout changes
options can pass multiple parameters to be passed in the form of a dictionary, the specific attributes and attribute values can be found in the official documentation. Quick parameters: fast default 200ms, slow default 600ms, duration time, complete: function () {}, etc.
Note: .hide () method is the original attributes and attribute values will be time again that is displayed or the original property preservation elements.
show and hide is to modify the display attributes, needs to be set individually by the method visibility attribute layout css
If you are using! Important in your style, you'll need to modify the properties via css method and add the following property! Important rewritten style
2, jQuery toggle switch displaying and hiding the method
(change pattern display: none / block)
toggle switch the two methods is the method of
ele.toggle $ ()
If no parameter element hiding is displayed; if displayed, hidden
$ Ele.toggle (options) to hide or show the animation will gradually change the width and height, resulting in page layout changes
options can pass multiple parameters to be passed in the form of a dictionary, the specific attributes and attribute values can be found in the official documentation. Quick parameters: fast default 200ms, slow default 600ms, duration time, complete: function () {}, etc.
$ Ele.toggle (display) is positioned directly
Provide a direct parameter specifies the primary color change the final result is displayed If true, if false is hidden
3, jQuery dropdown / scroll animations, and slideUp slideDown method
(changing the height of the element)
Pull-down element display method slideDown () and said show () is similar; pull-down element display method slideUp () and said hide () is very similar, and slideUp slideDown method is similar to Example slideDown
$ Ele.slideDown () directly slide animation matching element
$ Ele.slideDown (options) only changes the height of the element that would move up the page layout
options can pass multiple parameters to be passed in the form of a dictionary, the specific attributes and attribute values can be found in the official documentation. Quick parameters: fast default 200ms, slow default 600ms, duration time, complete: function () {}, etc.
Note: .slideDown () method is to start from scratch element is hidden .slideUp () method from there to, at the beginning of the element is displayed. Because animation is asynchronous, so to perform certain operations after the animation must be written inside the callback function
4, jQuery slideToggle upper roll drop-down method of switching
(changing the height of the element)
slideToggle method of switching between the two methods
$ Ele.slideToggle ()
If no parameter hidden elements, it will pull down; if displayed, the scroll
$ Ele.slideToggle (options) movies on a roll or pull-down will gradually change the height, resulting in page layout changes
options can pass multiple parameters to be passed in the form of a dictionary, the specific attributes and attribute values can be found in the official documentation.
Quick parameters: fast default 200ms, slow default 600ms, duration time, complete: function () {}, etc.
5, jQuery the fade-out / animations, and fadeOut fadeIn method
(change the transparency of the element)
Concealment method. FadeOut fade element () and said .hide () is similar; fade element display method fadeIn () and said show () is very similar. FadeOut fadeIn method and is similar to Example slideDown
$ Ele.fadeOut () directly fade Hide all matched elements
$ Ele.fadeOut (options) only changes the transparency of the opacity of elements that do not change page layout beginning, when transparency is 0, the page layout came along; the start if the layout changes when fadeIn (options), and then gradually change the transparency
options can pass multiple parameters to be passed in the form of a dictionary, the specific attributes and attribute values can be found in the official documentation. Quick parameters: fast default 200ms, slow default 600ms, duration time, complete: function () {}, etc.
Note: .slideDown () method is to start from scratch element is hidden .slideUp () method from there to, at the beginning of the element is displayed. Because animation is asynchronous, so to perform certain operations after the animation must be written inside the callback function
6, jQuery fadeToggle handover method in Fade
(transparency change element)
fadeToggle method of switching between the two methods
$ Ele.fadeToggle ()
If no parameter hidden elements, it will pull down; if displayed, the scroll
$ Ele.fadeToggle (options) will slowly fade animation elements change between transparency opacity 01, causing the page layout changes
options can pass multiple parameters to be passed in the form of a dictionary, the specific attributes and attribute values can be found in the official documentation. Quick parameters: fast default 200ms, slow default 600ms, duration time, complete: function () {}, etc.
7, fadeTo jQuery method of fade-in effect
(change the transparency of the element)
The method is an extension fadeTo fadeIn above procedure, the transparency can be specified elements
$ Ele.fadeTo (options) will slowly fade animation to change and specify a value element of transparency opacity between 01, resulting in page layout changes
options can pass multiple parameters to be passed in the form of a dictionary, the specific attributes and attribute values can be found in the official documentation.
Quick parameters: fast default 200ms, slow default 600ms, the required parameters (duration time, opacity transparency values), complete: function () {}, etc.
8, the toggle jQuery comparison with the slideToggle and fadeToggle
Display and operating elements can have hidden
Change pattern display: none / block / inline / inline-block ======> toggle lateral motion (shown left to right, right to left hidden)
Set height position ======> slideToggle longitudinal motion (displayed from the top, from the bottom up hidden)
Set Transparency ======> fadeToggle