jQuery的事件绑定

事件绑定的基本语法

1.最简单的事件绑定语法

    // 最简单的语法形式
    $('div').click( ()=>console.log(123) )  //123

2.绑定事件同时,给事件处理函数传参

    // 绑定事件的同时,给事件处理函数,传参
    // 参数1的对象,存储在事件对象e中 通过 e.data 来调用
    $('div').click( {name:'张三',age:18} , e => console.log(e.data) );  //name:'张三',age:18

要注意: 你能直接绑定的事件类型,必须是,jQuery支持的事件类型

不支持直接绑定的事件类型,通过 on 语法 来绑定

on语法实际上可以支持所有事件类型的绑定

基本语法

    // 基本语法
    $('div').on( 'click' , ()=>{console.log(123)} );  //123

绑定事件的同时,可以给事件对象e中新增一个 e.data 存储参数

    // 可以传参的语法
    $('div').on( 'click' , {name:'张三',age:18} , e => console.log(e) );  //name:'张三',age:18

事件委托语法形式

    $('div').on( 'click' , '.box' , () => console.log('点击class="box"触发的程序,自己class="box"则不执行') );
    $('div').on( 'click' , 'p' , () => console.log('点击p标签触发的程序') );

事件委托语法+传参形式

    // 点击name="1"触发的程序
    $('div').on( 'click' ,  '[name="1"]' , {name:'张三'}  , e => console.log(e.data) );  //name:'张三'

绑定多个事件绑定不同函数

    $("div").on({
        mouseover:e => console.log(e),//可以打印鼠标位置
        mouseout: () => console.log('鼠标移出'), 
        click:function(){console.log('鼠标点击')} 
    });

注意: 事件委托语法,可以支持所有符合html,css的判断条件

但是 jQuery的事件委托,与 JavaScript的事件委托有区别

区别1:

JavaScript事件委托,可以判断点击的是父级标签内容

jQuery只能判断点击的是 子级标签对象

区别2:

JavaScript事件委托,可以在父级标签的事件处理函数中,定义多个事件委托对象

jQuery一次只能委托一个事件对象,不能同时委托多个

总结:

如果父级对象中,有多个对象要写事件委托,使用JavaScript语法形式最佳

如果父级对象中,只有一个对象要写事件委托,使用jQuery语法形式最佳