Event flow model
a bubbling stream event type (the Bubbling): refers to the event triggered by the outwardly
event has been transmitted by the leaf node up to the root node in the ancestor
cancel event bubbling: Use event object, e.cancelBubble = true;
example:
<div id="d1" onclick="f2(event);">
<a href="javascript:;" onclick="f1(event);">Cilck Me</a>
</div>
function f1(e){ alert('点击了连接'); e.cancelBubble=true;//取消冒泡 }
function f2(e){ alert('点击了 div'); }
Type 2 capture event streams (Capturing): refers to the outside to inside trigger event
programmer can choose to bind event using event capture or event bubbling
ele.addEventListener ( 'click', doSomething2, true) true = false = bubble capture
top elements from the DOM tree until the most accurate elements with bubble-type event contrary
summary: DOM standard event model: DOM supports both standard bubble-type incident, also supports capture type event can be said to be a combination of both, first, captive, followed by bubbling transfer.
3 binding events
in different ways a binding event
1) the bind ()
concepts: the specific binding events for each event handler matching element
format: bind (type, [data] , fn);
$(选择器).bind("事件名","回调函数")；解绑 unbind $(选择器).unbind("事件名");
$('#d1').bind('click',function(){//正式写法，常用于解决浏览器兼容性 用户点id为d1的元素，即执行
$(this).html('hello java'); //$(this)为当前jQuery 对象:被单击的id为d1的元素
});
$('#d1').click(function(){//简写形式
$(this).html('hello java');
});
//含有一个或多个事件类型的字符串
$('#d1').bind('click submit',function(){
$(this).html('hello java');
});
$('#d1').bind({
'click':function(){ $(this).html('hello java'); }
'dblclick':function(){ $(this).html('bye'); }
});
Note: contains one or more event types of strings, a plurality of events separated by spaces. Such as "click" or "submit", can also be custom event name, bind to the elements of the current method can only existing binding event, after the event using JS for elements such as new ways of generating invalid.
2) on ()
concept: bind one or more events on the element selection event handler
format: on (events, [selector] , [data], fn)
Note: Method performance on () event to be bound than live ().
3) live ()
concept: jQuery to match all the elements attach an event handler
formats: live (type, [data] , fn);
Note: You can bind multiple events, even if this element is also added after coming effective.
4) one ()
for each specific event matching elements (like click) to bind a one-time event handler. (Second failure)
2 Characteristics of the jQuery event collection / synthetic event
1) hover (enter, leave) : Analog cursor hover event.
before jQuery 1.7 version of the method and mouseleave mouseenter trigger event.
After jQuery 1.8 version which trigger mouseover and mouseout events.
E.g:
$(function(){
$('.s1').hover(
function(){
$(this).addClass('s2');//光标进入
},
function(){
$(this).removeClass('s2');//光标离开
});
});
2) way does not use synthetic event.
E.g:
$('.s1').mouseenter(function(){//鼠标移入
$(this).addClass('s2');//绑定了 mouseenter 事件的 div
});
$('.s1').mouseleave(function(){//鼠标移出
$(this).removeClass('s2');
});
3) toggle (function1 () { }, function2 () {}, ...): Analog cursor continuous click event. According to the number of mouse clicks, and then click Run multiple functions
such as:
$(function(){
$('a').toggle(
function(){
$('#d1').show('slow');
},
function(){
$('#d1').hide('slow');
}
);
});
<a href="javascript:;">显示所有票价</a>
<div id="d1" style="display:none;">头等舱：￥2400<br />商务舱：￥2200<br />经济舱：￥1200<br /></div>
4) Analog operation: trigger ( 'click')
$(function(){
$('#b1').click(function(){
//模拟用户点击了 username 文本框，即让 username 文本框产生焦点获得事件
$('#username').trigger('focus');
//$('#username').focus();//简写形式，模拟获得焦点
//$('#username').click();//模拟点击 });
});
Common events in 3 jQuery
js is event-driven. When an event occurs, triggering a method (callback function)
1 loading the DOM events (Document Ready function)
1)
() .ready ();
. 3) $ (function () {})
NOTE: When the function is executed after the page loads
when not writing function when preloaded, jquery code needs to be placed in the html code (lower) surface
2 keyboard events
1) .keydown when the button is pressed or the keyboard, keydown event.
2) .keyup when the button is released, keyup events. Inner code
3) .keypress When the button is pressed or the keyboard, keypress event. ASC
3 mouse events
1) .click click event is triggered.
2) Double-click the mouse event .dblclick triggered.
3) event triggered by the user .mousemove mouse moves the mouse to move a pixel time-consuming system resources occurs. Please use caution this event.
4) .mouseover move the mouse events triggered / across (across the sub-element is triggered)
. 5) .mouseout event is triggered when the mouse is removed (removed subelement trigger)
. 6) Press the mouse .mousedown
7) .mouseup releasing the mouse
8) .mouseenter mouse to enter (into the child element does not trigger)
9) .mouseleave mouse leaves (leave no child elements trigger)
4 form event
1) .submit form submission events (event triggered when the form is submitted)
2) .focus element get focus event
3) .blur element loses focus event
4) .change element content change event (mainly for the drop-down list input (value) .textarea can)
5) .Select what the user select the text box when the text type of input or textarea element when text is selected, select an event will occur.
5 Other events
1) .load elements loaded
2) .unload user leaves the page