jQuery-3.事件篇---事件绑定与解绑

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"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( events ,[ selector ] ,[ data ], handler(eventObject) )

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>

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

$("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>