[Summary] jQuery event

Mouse events
keyboard events
other events
event parameters
event bound to cancel

Parameters containing fn callback function which

### mouse events -Click, the DblClick
the Click: mouse click trigger; dblclick: mouse double-click trigger
for example:

$("div").click(function(){
$(this).css("text-indent","0")//点击后首行缩进为0
})

Double-click the mouse click event is triggered when, if you want to distinguish between the need to prevent the event from bubbling
### mouse events -mousedown, mouseUp
mouseDown: Triggered when the mouse is pressed
the trigger when the mouse release: mouseup
example:

 $('div').mousedown(function(){
        $(this).css('background-color','red'); //鼠标按下时背景变红
    })
 $('div').mouseup(function(){
        $(this).css('background-color','yellow'); //鼠标按下时背景变黄
    })

### mouse events -mouseenter, mouseleave
mouse enters fired when removed
such as:

    $('li').mouseenter(function(){
        $(this).css('font-size','40px').css('color','red');//鼠标移入时修改字体大小和颜色
    })
    $('li').mouseleave(function(){
        $(this).css('font-size','medium').css('color','black');//鼠标移出时修改字体大小和颜色
    })

### mouse events -hover
hover ([over], OUT)
will enter the mouse, integrated into a trigger function when removed

     $('li').hover(function()
    { 
     $(this).css('font-size','40px').css('color','red');//鼠标移入时修改字体大小和颜色
    },function()
    {
     $(this).css('font-size','medium').css('color','black');//鼠标移出时修改字体大小和颜色
    })

### mouse events -mouseover, mouseout
mouse enters (out of) the specified element and its children when the trigger

Since each sub-element will trigger event, is not conducive to capturing and event bubbling, and therefore do not recommend using
### mouse events -mousemove
mouseMove ([[the Data], the Fn])
mouseMove event occurs when moving within the DOM
### mouse event -scroll
scroll ([[the Data, the Fn])
when rolling when the specified element will scroll event

Not necessarily by the wheel, drag the scroll bar can also be

# Key events

Press the keyboard will trigger keyboard events, in the order: keydown-> keypress-> keyUp
keyDown, the KeyPress event fires in the text not embedded in the text box (just press the character key to display the results)

### keydown ([[data], fn])
when the keyboard or a button is pressed , the occurrence of an event keydown

Events must take place in a place that can get focus
Entered in the input method will process the value
### keyup ([[data], fn])
when the keyboard or button release time, keyDown event occurs on the element currently has the focus (cursor) of
example:

 $('input').keyup(function(){
        $('p').text($(this).val()); //在p标签上实时获取输入值
    })

Events must take place in a place that can get focus
Entered in the input method will process the value
### keypress ([[data], fn])
when the keyboard or button is pressed, keypress event
Legacy keyboard events, but still be preserved, and only when the input content only response, enter ctrl, shift as well as the input method does not respond, because no entry

Other events #
### other events -ready, of a resize
the Read (the Fn)
when the DOM is ready to bind a function to be executed when the query and manipulate
resize ([[data], fn ])
when you resize the browser window is large hours, resize event

Note that the size of the window, not the document size, you can use the window
### other events -focus, Blur
Focus ([[the Data], the Fn]), Blur ([[the Data, the Fn])
when Marshal ** to get (to lose) ** trigger focus focus (blus) events
such as input box to determine whether there is content, and change the border color and message:

$('input').focus(function(){
       $('span').text('请输入用户名');//获取焦点后提示
   })
    $('input').blur(function(){
        if($(this).val() == ''){ //失去焦点后判断
        $(this).css({'border':'2px solid red'});
       $('span').text('用户名不能为空') 
        }
       else{
        $(this).css({'border':'2px solid green'});
        $('span').text('');
       }
   })

Other events ### -change
change ([[Data], Fn])
when the value of the element is changed, a change event may occur

Non-real-time, only the value change will occur when
### 4-5 other events -Select
the SELECT ([[the Data], the Fn])
is triggered when selected, textarea or input text type of the text, and is also optional editing valid
### other events -submit
the submit ([[the Data], the Fn])
the submit event occurs when the form is submitted
In addition to the button IE browser as other cores submit form in the presence of
Use submit events
to submit the form
to prevent form submission
form validation
submit () event is triggered when the form is submitted to the (so to put click event)
so that needs to be validated when placed in the submit callback function in the operating
return false when the form is not submitted

# Event parameter event

All events will pass an event argument

Event ### is associated with cancellation -ON
ON (Events, [Selector] [Data] .fn.)
Binding element on a selected event handler or a plurality of events
can refer to the following formats:

$(document).on('事件类型; '绑定的元素',fn);
同时绑定多个事件$(document).on({
'事件类型': fn
},{
'事件类型': fn
});

[Selector] can be dynamically generated
By binding a plurality of events {}
### is associated with the event canceled -OFF
OFF (Events, [Selector]. [Data] .fn)
removal of one or a plurality of event handler event on the selected element
jQuery event listeners available in four ways, namely bind, live, delegate, on, listening to lift functions correspond respectively unbind, die, undelegate, off (the interview even asked how many binding events
One for each binding must unbundling, the code a bit redundant
document is not an ordinary object, you must use add () to select the
### events tied to cancel -one
One (of the type. [the Data] .fn)
bind a specific event for each (for example, click) matching elements a one-time event handler
Binding time will be automatically removed

Jane book Portal: https://www.jianshu.com/p/6f571d483902

[Summary] jQuery event

Guess you like