jQuery event (jQuery event method / event binding / unbinding event / trigger events / event object)

jQuery Events

jQuery is designed specifically for the event handler.

jQuery's event mechanism, means that: jQuery JavaScript package for DOM events operations, including: event bindings, events unbundling, event trigger.

Development process simple event jQuery event bindings >> bind event binding >> delegate event binding >> on

What is the event?

Page called the incident a response to different visitors.
Event handler method means that when certain events occur in the HTML call.

Example:

1) Move the mouse pointer over the element.
2) Select the radio button
. 3) Click on the elements
often use the term in the event "trigger" (or "excitation") Example: "triggering keypress event when you press the keys."

Common DOM events:

Event Functions	Explanation
click(handler)	Click event
blur(handler)	Event loses focus
mouseenter(handler)	Mouse enter event
mouseleave(handler)	Mouse leave event
dbclick (trades)	Double-click the event
change(handler)	Change events, such as: text box value changes, and so on down the list of values ​​change
focus(handler)	Get focus event
keydown(handler)	Keyboard down events

jQuery event method syntax

In jQuery, the most DOM events have an equivalent of jQuery methods.
Page specify a click event:

$("p").click();

The next step is to define what time trigger events. You can be achieved by an event function:

$("p").click(function(){
    // 动作触发后执行的代码!!
});

Commonly used jQuery event method

1. $ (The Document) .ready ()
$ (the Document) .ready () method allows us to perform a function after the document is fully loaded. The event method has been mentioned in the jQuery syntax section.

2.Click ()
the Click () method when the button click event is triggered calls a function.

This function is executed when the user clicks on an HTML element.

In the following example, when a click event

When triggered, the current hidden elements

element:

//实例
$("p").click(function(){
  $(this).hide();
});

3.dblclick ()
when you double-click an element, it will dblclick event.

dblclick () method triggers dblclick event, function or operation specified event occurs when dblclick:

//实例
$("p").dblclick(function(){
  $(this).hide();
});

4.mouseenter ()
when the mouse pointer through the elements, will mouseenter event.

mouseenter () method triggers mouseenter event, function or operation of the provisions of mouseenter when events occur:

//实例
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});
	

5.mouseleave ()
when the mouse pointer leaves the element will mouseleave event.

mouseleave () method mouseleave trigger event, or specified when the function mouseleave run when events occur:

//实例
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});
	

6.mousedown ()
when the mouse pointer is moved over the element, and the mouse button is pressed, mousedown event will occur.

mousedown () method triggers mousedown event, function or operation of the provisions of the mousedown event occurs when:

//实例
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

7.mouseup ()
when you release the mouse button on the element will mouseup event.

mouseup () method triggers mouseup event, function or operation of the provisions of mouseup when events occur:

//实例
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

8.hover ()
hover () method for simulating cursor hover event.

When the mouse moves over the element, will trigger the first function specified (MouseEnter); when the mouse out of the element, will trigger the second specified function (mouseleave).

//实例
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

9.focus ()
when the element gets focus, focus events.

When the mouse click on the selected element or elements via navigate to the tab key, the element will focus.

focus () method triggers the focus event, function or operation specified event occurs when the focus:

//实例
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

10.blur ()
when the element loses focus, blur event occurs.

blur () method triggers the blur event, function or operation specified event occurs when a blur:

//实例
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

Event binding

1.bind way
role: to match the elements bind directly to the event (not recommended, jQuery version 1.7 after being replaced on)

// 绑定单击事件处理程序
第一个参数：事件类型
第二个参数：事件处理程序
$("p").bind("click mouseenter", function(e){
    //事件响应方法
});

Advantages: a plurality of events can bind simultaneously, such as: bind ( "mouseenter mouseleave", function () {})

Cons: still unable to create dynamic element binding event

2.delegate way

Role: to the matching element is bound to the event, effective support for dynamically created elements (characteristics: high performance, support elements dynamically created)

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

The biggest advantage with the first two ways: reduce the number of binding events to improve efficiency, support for dynamic creation out of the element binding event

Note: The difference between the mouseover and mouseenter:
mouseover bubbling, mouseenter not bubble

3.on way
(the most modern way, compatible zepto (a similar end mobile library jQuery's), it is strongly recommended method used)

After jQuery1.7 version, jQuery used on a unified method for all event processing
functions: to match the elements of the binding event, including all the advantages of the above-way binding events

// Parameter 1: events, multiple events name of the binding event can be separated by spaces // Parameter 2: selector, perform event descendant elements
// Parameter 3: data, data processing is passed to the function, event-triggered @ 4 parameters when used by event.data: handler, the event handler
$ (selector) .on (events [ , selector] [, data], handler);

//表示给$(selector)绑定事件，但必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});
 
// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});

Unbundling event

1.unbind () mode

Role: unbundling bind the binding event

$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

2.undelegate () mode

Role: unbundling way binding event delegate

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

3.off unbundling on how binding events

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );

Event trigger

Simple event triggers

$(selector).click(); //触发 click事件

Methods trigger trigger events

$(selector).trigger(“click”);

triggerHandler trigger event response method, does not trigger the browser behavior

For example: the default behavior of the text box to get focus

$(selector).triggerHandler(“focus”);

jQuery event object description

event	Explanation
event.pageX	The mouse position relative to the left of the page
event.target	Element that triggered the event (the event target)
event.currentTarget	Elements of the object for which the event
event.keyCode	Keyboard key code
event.stopPropagation()；	Stop event bubbling
event.preventDefault();	Prevent the default behavior
event.type	Event Type: click, dbclick ...
event.which	Button type mouse: the left and right 3 12
event.data	Additional data passed to the event handler

return false; // also prevent bubbling and prevent the default behavior of the function
this: which element the event handler for an object, this would point to an object which element