cto 最大 匹配 -- regular nbsp 事件處理程序 多個 快捷方式

on()的多事件綁定

之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬於快捷處理。翻開源碼其實可以看到，所有的快捷事件在底層的處理都是通過一個"on"方法來實現的。jQuery on()方法是官方推薦的綁定事件的一個方法。

基本用法：.on( events ,[ selector ] ,[ data ] )

最常見的給元素綁定一個點擊事件，對比一下快捷方式與on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on(‘click‘,function(){}) //on方式

最大的不同點就是on是可以自定義事件名，當然不僅僅只是如何，繼續往下看

多個事件綁定同一個函數

 $("#elem").on("mouseover mouseout",function(){ });

通過空格分離，傳遞不同的事件名，可以同時綁定多個事件

多個事件綁定不同函數

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

通過空格分離，傳遞不同的事件名，可以同時綁定多個事件，每一個事件執行自己的回調方法

將數據傳遞到處理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕課網
}
$( "button" ).on( "click", {
  name: "慕課網"
}, greet );

可以通過第二參數（對象），當一個事件被觸發時，要傳遞給事件處理函數的

<h2>on綁定多事件</h2>

<h4>測試一</h4>
<div class="left">
點擊觸發：on(‘click‘,fn)
<div id="test1"></div>
</div>
<script type="text/javascript">
//事件綁定一
$("#test1").on(‘click‘, function(e) {
$(this).text(‘觸發事件：‘ + e.type)

})
</script>


<h4>測試二</h4>
<div class="left">
點擊觸發：on(‘mousedown mouseup‘)
<div id="test2"></div>
</div>
<script type="text/javascript">
//多事件綁定一
$("#test2").on(‘mousedown mouseup‘, function(e) {
$(this).text(‘觸發事件：‘ + e.type)
})
</script>


<h4>測試三</h4>
<div class="right">
點擊觸發：on(mousedown:fn1,mouseup:fn2)
<div id="test3"></div>
</div>
<script type="text/javascript">
//多事件綁定二
$("#test3").on({
mousedown: function(e) {
$(this).text(‘觸發事件：‘ + e.type)
},
mouseup: function(e) {
$(this).text(‘觸發事件：‘ + e.type)
}
})
</script>

on()的高級用法

針對自己處理機制中，不僅有on方法，還有根據on演變出來的live方法(1.7後去掉了)，delegate方法等等。這些方法的底層實現部分 還是on方法，這是利用了on的另一個事件機制委托的機制衍變而來的

委托機制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二參數中提供了一個selector選擇器，簡單的來描述下

參考下面3層結構

<div class="left">
    <p class="aaron">
        <a>目標節點</a> //點擊在這個元素上
    </p>
</div>

給出如下代碼：

$("div").on("click","p",fn)

事件綁定在最上層div元素上，當用戶觸發在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二參數，那麽事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發事件回調函數

<h2>on事件委托</h2>
<div class="left">
<a>陳咪咪</a>
<div class="aaron">
<a>111</a>
<a>點擊這裏</a>
</div>
</div>
<script type="text/javascript">
//給body綁定一個click事件
//沒有直接a元素綁定點擊事件
//通過委托機制，點擊a元素的時候，事件觸發
$(‘body‘).on(‘click‘, ‘a‘, function(e) {
alert(e.target.textContent)
})
</script>

卸載事件off()方法

• 通過.on()綁定的事件處理程序
• 通過off() 方法移除該綁定

根據on綁定事件的一些特性，off方法也可以通過相應的傳遞組合的事件名，名字空間，選擇器或處理函數來移除綁定在元素上指定的事件處理函數。當有多個過濾參數時，只有與這些參數完全匹配的事件處理函數才會被移除

綁定2個事件

$("elem").on("mousedown mouseup",fn)

刪除一個事件

$("elem").off("mousedown")

刪除所有事件

$("elem").off("mousedown mouseup")

快捷方式刪除所有事件，這裏不需要傳遞事件名了，節點上綁定的所有事件講全部銷毀

$("elem").off()

 <h2>刪除事件</h2>


    <h4>測試一</h4>
    <div class="left">
        on(‘mousedown mouseup‘)
        <div class="aaron">點擊觸發</div>
    </div>
    <button>點擊刪除mousedown事件</button>
    <script type="text/javascript">
    var n  = 0;
    //綁定事件
    $(".aaron:first").on(‘mousedown mouseup‘, function(e) {
        $(this).text( ‘觸發類型:‘ +  (e.type) + ",次數" + ++n)
        ++n;
    })

    //刪除事件
    $("button:first").click(function() {
        $(".aaron:first").off(‘mousedown‘)
    })
   
    </script>



    <h4>測試一</h4>
    <div class="left">
        on(‘mousedown mouseup‘)
        <div class="aaron">點擊觸發</div>
    </div>
    <button>點擊銷毀所有事件off</button>
    <script type="text/javascript">
    var n  = 0;
    //綁定事件
    $(".aaron:last").on(‘mousedown mouseup‘, function(e) {
        $(this).text( ‘觸發類型:‘ +  (e.type) + ",次數" + ++n)
        ++n;
    })

    //刪除事件
    $("button:last").click(function() {
        $(".aaron:last").off()
    })
   
    </script>

jQuery-3.事件篇---事件綁定與解綁