JQuery text box event binding and cancellation code

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.