JqueryOn綁定事件方法介紹

時間 2019-11-08

標籤 jqueryon 綁定事件方法介紹简体版

原文原文鏈接

JqueryOn綁定事件方法介紹

1. 簡介javascript

(1) On()方法在被選及子元素上添加一個或多個事件處理程序css

(2) 在jquery 版本1.7起，on()方法是bind(),live()和delegate()方法的新的替代品，該方法給API帶來不少便利，簡化了JQUERY代碼庫。html

(3) 使用on()方法添加的事件處理程序適用於當前及將來的元素(好比由腳本建立的新元素)java

2. 目前瞭解到使用場景jquery

(1) 使用ajax請求數據時使用。ajax

(2) 對加載完頁面以後的元素進行事件綁定。app

3. 注意事項測試

(1) 你使用jquery追加的元素要在一個不會進行改變的父級之下，能夠是DOCUMENT。this

(2) 綁定有兩種方式spa

① 單個事件綁定

1) $(「#id」).on(‘click’,function(){}) 把點擊事件綁定到id爲id的元素身上

2) $(「#id」).on(‘click’,’.div’,function(){}) 把點擊事件綁定到id爲id的子級元素類名爲div的元素身上

② 多事件同時綁定到一個元素上

③ $(「.div」).on({

mouseover:function(){$(「body」).css(「background-color」,」red」)},

mouseout:function(){$(「body」).css(「background-color」,」yellow」);},

click:function(){$(「body」).css(「background-color」,」green」)}

})

4. 案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ENTRUST</title>
</head>
<body>
<div>
    <button> 測試 </button>
    <button> 測試-測試-測試 </button>
    <div>
        <button> 測試1 </button>
        <button> 測試-測試ButtonA </button>
    </div>
</div>

<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script>
    $(".onCase").on("click",".onCaseButtonA",function(){
        console.log(this.class,"測試—class-onCaseButtonA");
    });
    $('.onCaseButton').click(function () {
        console.log(this.class,"測試—class-onCaseButton")
    });
    $('.Button').click(function () {
        $('<button> 測試-Button </button>').append();
    });
    $('.ButtonA').click(function () {
        $("<button> 測試-測試ButtonA </button>").append();
    });
</script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。