Jquery event Learning

Jquery event Learning
Bind Event 1. bind

Parameters:
(EventType [, eventData], handler (eventObject), eventType can beCustom eventsIn this case, the trigger cannot be triggered through the browser. You can manually trigger the trigger. In addition, the trigger () method is used to understand howEvent occurrenceInput parameters to the event processing function, instead of passing data when the event is bound.

2. unbind

Events used to unbind bind. One of the usage is as follows:

Var timesClicked = 0; $ (# foo ). bind (click, function (event) {alert (The quick brown fox jumps over the lazy dog .); timesClicked ++; if (timesClicked> = 3) {$ (this ). unbind (event); // specifies whether to use event for the purpose? }});

3. on

. On (eventType, selector, data, handler)
Selector
It indicates the elements that can be bound to events filtered out from the descendant element of the selected element. That is:

When the selector parameter is provided, the event handler refers to a delegate event (usually many people call it a proxy event ). Events are not triggered on directly bound elements, but when the selector parameter selector matches the descendant (internal element), the event processing function is triggered.

Note:Event processing can only be bound to the selected element. In addition, when your code calls. on (), they must already exist. To make sure that the current element can be selected, that is, it already exists, it is best to place the script behind the HTML tag of the element or bind the event in the ready event of the document.

UseEvent DelegateAn advantage is that an event is bound to an existing parent element, and the child element can process these events after being added to the document. That isYou can bind events to uncreated child element.
Another benefit of event proxy is that whenWhen you need to add the same event for Multiple Elements, You only need to add an event proxy for their parent element, which reduces the overhead. Let's look at the following differences:

Add an event to each tr-normal edition:

$( #dataTable tbody tr ).on( click, function() {  console.log( $( this ).text() );});

Add events to each tr-use event Proxy:

$( #dataTable tbody ).on( click, tr, function() {  console.log( $( this ).text() );});

Data Parameters
Used as an event when an event is triggered. the data attribute is passed to the event handler. The data parameter can be of any type, but if it is of the string type, the selector parameter must be provided, or null is passed explicitly, such a data parameter is not mistaken for a selector. It is best to use an object (key-Value Pair), So multiple values can be passed as attributes.

If you want to use a global variable in the event handler (closure), and the value of this global variable can be changed, to use a value of a certain State, you can pass the current value of the global variable as the data parameter.

Event processing function Scope
When jQuery calls a processing program, this keyword points to the elements of the currently executing event. For a direct event, this indicates the element that binds the event. For proxy events, this represents the elements that match the selector.

Note:When an event is triggered for the first time, the processing function list is set to the element.. Adding or deleting Event Handlers on the current element does not take effect immediately until the next event is processed:

var $test = $( #test );function handler1() {  console.log( handler1 );  $test.off( click, handler2 );}function handler2() {  console.log( handler2 );}$test.on( click, handler1 );$test.on( click, handler2 );

Handler2 will be executed when you click test for the first time, because when handler1 is executed for the first time, the handler2 event handler is not set to the element, so it doesn't matter if it is off.

Event object

1. event. stopPropagation ()
Prevents events from bubbling to the parent element.
2. event. stopImmediatePropagation ()
In addition to blocking event bubbling to the parent element, it also blocks the execution of other (different) processing functions for the same event on the current element:

Btn. on ({click: function (event) {show. text ('click here '); event. stopImmediatePropagation () ;}, dblclick: function () {show. text ('double click here ') ;}}); btn. on ('click', function () {show. text ('click second'); // cannot execute });

When you call event. stopPropagation () and event. preventDefault (), false is automatically returned from an event handler. You can also use false as the handler parameter in the event processing function.