jQuery event bindings with trigger - study notes

• jQuery event binding and triggers
  • Event binding
  • Automatically trigger event
  • Normal mouse event
  • Event bubbling and the default behavior
    • Event bubbling
    • The default behavior
  • Get the current mouse position and button

jQuery event binding and triggers

Event binding

• Basic Binding

  $(element).click(function(){})

• Method binding

$ (Element) .bind ( 'click', function () {}) // binding events

$ (Element) .unbind (); // event bindings released

• Dynamic binding

live.onThe method of removal in the high version of jquery, note the version in use

$(element).live('click', function(){})

You can use on()the method to add selectorparameters, dynamic binding

$(element).on('click','selector', function() {});

Automatically trigger event

When we want to trigger the event of an element can be used trigger(), pay attention to the type of event to be specified element

$(element).trigger('click')

Normal mouse event

Click mouse click event

Double-click the mouse events dbclick

Mouse moved event mouseover

Mouse out event mouseout

Mouse down event mousedown

Mouse up event mouseup

Mouse motion events mousemove

Event bubbling and the default behavior

Event bubbling

When the elements of a triggering event, will automatically trigger the parent and ancestors level of the same type of event that element , resulting in concurrent events , leading to confusion page, called event bubbling

At this point we can return one of the elements in the event handler falseto stop, pay attention to this method is limited to use in jQuery

The default behavior

Some page elements are provided with the default behavior, such as alink click, form submission, or submission will jump, which we become the default behavior

But after binding on the event, it will first perform the first event, go to execute the default behavior when, and sometimes we just want to let the trigger event, but does not do default behavior,

We can return an event that element falseto prevent the default behavior

<a href="http://www.Google.com">谷歌</a>
<script>
    $('a').click(function(){
        return false;
    })
<script>

Get the current mouse position and button

We have mouse and keyboard events in triggering events if we When you want to get key information ,

First, the current need in the event of passing an event object event

$(element).click(function(e){//传入参数非固定，可自定义，默认第一个为event对象

    //能够获取>鼠标的x轴和y轴坐标,坐标位置相对于浏览器窗口
    var x = e.clientX;
    var y = e.clientY;

    //能够获取>鼠标的x轴和y轴坐标,坐标位置相对于文档
    var _x = e.pageX;
    var _y = e.pageY;
})

$(element).keydown(function(e){
    //可以打印e对象,或者直接使用该对象中的keyCode属性来获取按键信息
    var key = e.keyCode;
    console.log(key);
})