jQuery Events

window.onload() 和 $(function(){})

Browser loads the document, after the page is loaded, the browser will add events to DOM elements by this method:

js - window.onload () method
- Execution timing: page all the elements (and associated files) is fully loaded into the browser after execution
- onload event can only be given a reference to a function that automatically overwrite the previous function.
jquery - $(document).ready()方法
- Execution timing: DOM is fully ready can call disadvantage: if the element of uncertainty associated with the file download is complete
  - Page loading method -load () method
  - ```
  $(window).load(function(){
      //会在所有内容加载完毕后触发
  })
```
- Each call to add a new behavior on existing behavior, execution order
- Logogram
  - $(function(){});
  - $().ready(function{});

Binding and synthetic event

event	effect
bind()	Matching elements bind specific event (event type, an optional parameter handler)
is()	Determine whether the expression elements
hover()	Synthetic event, simulate cursor hover event
toggle()	Continuous simulated mouse click event; Switching elements visible;
triggle()	Trigger specifies the type of the selected element

Event bubbling

A plurality of elements in response to the same event, the event started by the particular element (element binding), step by step up to a more spread not particularly node (document body)

Question: Examples of use W3School the trigger (), why there were three:

<!--HTML-->
<input type="text" name="FirstName" value="Hello World">
<br />
<button>激活 input 域的 select 事件<button>

//jQuery
$(function(){
    $("input").select(function(){
        this.after("文本被选中了！");
    });
    var e = $.Event("select");
    $("button").click(function(){
        $("input").trigger(e);
    });
});

Click to see the emergence of three after text is selected!

First of all, I found that if there is no value in the input will only return a text is selected!, So the first one is displayed when the text is not selected.

Secondly, I queried from jQuery1.3 start, .trigger () event bubbling in the DOM tree;

So the second should be the trigger to select Hello Wrold and executed once;

The third is to detect the Hello World was selected to perform once again;

Preventing Methods: triggerHandler or .stopPropagation () method

Stop event bubbling

event.stopPropagation()

Prevent the default behavior: event.preventDefault ()

Or return false

Event Capture

Down from the top of the DOM start trigger

jQuery does not support the event capture.

Properties of the object event

event.pageX and event.pageY acquired page cursor relative coordinates x and y coordinates.

In JavaScript:

IE browser - event.x / event.y
Firefox - event.pageX / event.pageY

Remove event .unbind ()

Adding elements .append ()

qq_27568213

Released nine original articles · won praise 0 · Views 3310

Private letter concerns

jQuery Event Notes - "sharp jQuery"