The event handler refers to the method called when some events occur in HTML. Terms are often used when an event is triggered (or triggered. Usually put the jQuery code inSome event handling methods are as follows:
Jquery binding event
At present, more than 1.7 of jquery event bindings have replaced the original bind with on;
Difference: (personal understanding) bind is a binding event to each sub-node; on is only bound to the parent node, and then bubbles to each sub-node;
Usage: bind
The Code is as follows: |
Copy code |
An event, a method: $ (". class input"). bind ('click', function (e) {...; e. stopPropagation ;}) Two events, one method: $ (". class input"). bind ('click mouseover', function (e) {...; e. stopPropagation ;}) Two events, two methods: $ (". class input "). bind ({click: function (e ){...; e. stopPropagation;}, mouseover: function (e ){...; e. stopPropagation ;}})
|
On, you can replace bind directly, that is, the above usage applies to on;
In addition, on has two more optional parameters than bind.
The Code is as follows: |
Copy code |
On (events [, selector] [, data], handler (eventObject )) |
Selector: the element to be bound. The preceding example can be written as: $ (". class "). bind ('click', 'input', function (e ){...; e. stopPropagation ;})
(It should be noted that one of the events is not easy to use, that is, the unique event under 'put' ie: onpropertychange;
The Code is as follows: |
Copy code |
Available: $ (". class input"). bind ('propertychang', function (e) {...; e. stopPropagation ;}) No response: $ (". class"). bind ('propertychang', 'input', function (e) {...; e. stopPropagation ;}) ) |
Data: The parameter passed to event. data,
The Code is as follows: |
Copy code |
$ (". Class "). bind ('click', 'input', '000000', function (e) {alert (e. data/* 123 */); e. stopPropagation ;}) (For more specific usage, see the manual http://api.jquery.com/on ); |
(2) input textare event
The onkeyup + onchange is used to trigger a real-time change event in the text box. However, onchang must be triggered only after the text box is defocused.
(If IE) onpropertychange + else oninput.
Note:
The oninput event is triggered when the user inputs, returns, deletes, cut, and pastes, and when the mouse is cut or pasted (which may be slightly different in IE9 & IE9 + ).
(Firefox, Chrome, IE9 & IE9 + Support)
The onpropertychange event is triggered when the user inputs, returns, deletes, cut, and pastes, and when the mouse is cut and pasted.
(IE only ).
JQuery events
The following are examples of event methods in jQuery:
Bind the Event function
$ (Document). ready (function) binds the function to the ready event of the document (when the document is loaded)
$ (Selector). click (function) triggers or binds a function to a click event of the selected element.
$ (Selector). dblclick (function) trigger or bind the function to the double-click event of the selected Element
$ (Selector). focus (function) triggers or binds the function to the get focus event of the selected element.
$ (Selector). mouseover (function) triggers or binds a function to the mouse hover event of the selected Element
The unbind () method removes the event handler of the selected element.
This method can remove all or selected event handlers, or terminate the running of the specified function when an event occurs.
Ubind () applies to any event handler appended with jQuery.
Unbind element event handlers and functions
Specifies one or more event handlers to be deleted from a specified element.
If no parameter is specified, the unbind () method deletes all event handlers of the specified element.
Remove previous binding events
The Code is as follows: |
Copy code |
$ ("# Result"). unbind ("click ") |
If you want to remove all binding events, use $ ("# result"). unbind () directly ()
The Code is as follows: |
Copy code |
$ ("# Sidebar h3"). unbind ("click ") |
Syntax
The Code is as follows: |
Copy code |
$ (Selector). unbind (event, function) |
Use the Event object to unbind the Event handler
Specifies the event object to be deleted. Used to unbind internal events (for example, deleting an event handler after an event has been triggered for a certain number of times ).
If no parameter is specified, the unbind () method deletes all event handlers of the specified element.
Syntax
The Code is as follows: |
Copy code |
$ (Selector). unbind (eventObj) Try it yourself |
Parameter description
Optional. Specifies the event object to be used. This eventObj parameter comes from the event binding function.