事件冒泡
什么是事件冒泡
在一個(gè)對(duì)象上觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。
事件冒泡的作用
事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上，避免把事件處理器添加到多個(gè)子級(jí)元素上），它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。
阻止事件冒泡
事件冒泡機(jī)制有時(shí)候是不需要的，需要阻止掉，通過(guò) event.stopPropagation() 來(lái)阻止
$(function(){
? ? var $box1 = $('.father');
? ? var $box2 = $('.son');
? ? var $box3 = $('.grandson');
? ? $box1.click(function() {
? ? ? ? alert('father');
? ? });
? ? $box2.click(function() {
? ? ? ? alert('son');
? ? });
? ? $box3.click(function(event) {
? ? ? ? alert('grandson');
? ? ? ? event.stopPropagation();
? ? });
? ? $(document).click(function(event) {
? ? ? ? alert('grandfather');
? ? });
})
......
<div class="father">
? ? <div class="son">
? ? ? ? <div class="grandson"></div>
? ? </div>
</div>
阻止默認(rèn)行為
阻止右鍵菜單
$(document).contextmenu(function(event) {
? ? event.preventDefault();
});
合并阻止操作
實(shí)際開(kāi)發(fā)中，一般把阻止冒泡和阻止默認(rèn)行為合并起來(lái)寫(xiě)，合并寫(xiě)法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并寫(xiě)法：
return false;
頁(yè)面彈框?qū)嵗?/b>
事件委托
事件委托就是利用冒泡的原理，把事件加到父級(jí)上，通過(guò)判斷事件來(lái)源的子集，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
一般綁定事件的寫(xiě)法
$(function(){
? ? $ali = $('#list li');
? ? $ali.click(function(event) {
? ? ? ? $(this).css({background:'red'});
? ? });
})
...
<ul id="list">
? ? <li>1</li>
? ? <li>2</li>
? ? <li>3</li>
? ? <li>4</li>
? ? <li>5</li>
</ul>
事件委托的寫(xiě)法
$(function(){
? ? $list = $('#list');
? ? $list.delegate('li', 'click', function(event) {
? ? ? ? $(this).css({background:'red'});
? ? });
})
...
<ul id="list">
? ? <li>1</li>
? ? <li>2</li>
? ? <li>3</li>
? ? <li>4</li>
? ? <li>5</li>
</ul>
取消事件委托
// ev.delegateTarge 委托對(duì)象
$(ev.delegateTarge).undelegate();
// 上面的例子可使用 $list.undelegate();
jquery元素節(jié)點(diǎn)操作
創(chuàng)建節(jié)點(diǎn)
var $div = $('<div>');
var $div2 = $('<div>這是一個(gè)div元素</div>');
插入節(jié)點(diǎn)
1、append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素
var $span = $('<span>這是一個(gè)span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
2、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素
3、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素
4、before()和insertBefore()：在現(xiàn)存元素的外部，從前面插入元素
刪除節(jié)點(diǎn)
$('#div1').remove();
todolist(計(jì)劃列表)實(shí)例
滾輪事件與函數(shù)節(jié)流
jquery.mousewheel插件使用
jquery中沒(méi)有鼠標(biāo)滾輪事件，原生js中的鼠標(biāo)滾輪事件不兼容，可以使用jquery的滾輪事件插件jquery.mousewheel.js。
函數(shù)節(jié)流
javascript中有些事件的觸發(fā)頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說(shuō)的鼠標(biāo)滾輪事件，在短事件內(nèi)多處觸發(fā)執(zhí)行綁定的函數(shù)，可以巧妙地使用定時(shí)器來(lái)減少觸發(fā)的次數(shù)，實(shí)現(xiàn)函數(shù)節(jié)流。
