事件冒泡,阻止冒泡,事件委托,節(jié)點操作

//事件冒泡

? ? $(function () {

$('.grandfather').click(function () {

alert(3);

? ? ? ? })

$('.father').click(function () {//點擊son后事件會往上邊傳遞,如果父元素有點擊事件也會觸發(fā),一直往上傳

? ? ? ? ? ? alert(2);

? ? ? ? })

$('.son').click(function (event) {//

? ? ? ? ? ? alert(1);

? ? ? ? ? ? console.log(event);

? ? ? ? ? ? console.log('x軸坐標(biāo)'+event.clientX);

? ? ? ? ? ? //阻止冒泡

? ? ? ? ? ? event.stopPropagation();

? ? ? ? ? ? return false;//簡寫

? ? ? ? });

? ? ? ? //阻止右鍵菜單

? ? ? ? $(document).oncontextmenu(function (event) {

//阻止默認(rèn)行為

? ? ? ? ? ? event.preventDefault()

})

})

//阻止冒泡

? ? $(function () {

return false;

? ? })

//事件委托 對大量的子元素操作的時候用 一種代理模式

? ? $(function () {//只綁定一次事件通過冒泡的方式處理

? ? ? ? $('.list').delegate('li','click',function () {//第一個參數(shù)是選擇器,第二個是事件

? ? ? ? ? ? alert($(this).html());

? ? ? ? ? ? //取消委托

? ? ? ? ? ? $('.list').undelegate();

? ? ? ? })

})

//節(jié)點操作

? ? var $span = $('<span>元素</span>');

? ? $('#div1').append($span);//從后邊添加子元素

? ? $span.appendTo('#div1');//也是從后邊添加 同上

? ? $('#div1').prepend($span);//從前插入子元素

? ? $span.prependTo('#div1');

? ? $('#div1').before($span);//把span插入到div前邊

? ? $span.insertBefore('#div1')

after()//插入到后邊

? ? inserAfter()

remove()//刪除

</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,826評論 1 45
  • //------------------------- 第一章 認(rèn)識JQuery ----------------...
    米塔塔閱讀 809評論 0 9
  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,701評論 1 11
  • jquery介紹 jQuery是目前使用最廣泛的javascript函數(shù)庫。據(jù)統(tǒng)計,全世界排名前100萬的網(wǎng)站,有...
    1263536889閱讀 397評論 0 1
  • jquery介紹 jQuery是目前使用最廣泛的javascript函數(shù)庫。據(jù)統(tǒng)計,全世界排名前100萬的網(wǎng)站,有...
    LiWei_9e4b閱讀 536評論 0 0

友情鏈接更多精彩內(nèi)容