事件绑定的基本语法

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

标签对象.事件类型( 事件处理函数 )
    // 最简单的语法形式
    $('div').click( ()=>console.log(123) )  //123

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

标签对象.事件类型( {键名:键值...} , 事件处理函数 )
第一个参数,输入的对象,jQuery执行时,会自动存储在 事件对象 e 中
会在 事件对象e 中 新增一个属性 data 将 对象,存储在 data 中
通过 e.data 来调用数据
    // 绑定事件的同时,给事件处理函数,传参
    // 参数1的对象,存储在事件对象e中 通过 e.data 来调用
    $('div').click( {name:'张三',age:18} , e => console.log(e.data) );  //name:'张三',age:18

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

直接绑定事件类型的语法,不能写事件委托

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

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

基本语法

标签对象.on( '事件类型' , 事件处理函数 );
    // 基本语法
    $('div').on( 'click' , ()=>{console.log(123)} );  //123

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

标签对象.on( '事件类型' , {传参的对象} , 事件处理函数 );
    // 可以传参的语法
    $('div').on( 'click' , {name:'张三',age:18} , e => console.log(e) );  //name:'张三',age:18

事件委托语法形式

标签对象.on( '事件类型' , '判断条件' , 事件处理函数 );
    $('div').on( 'click' , '.box' , () => console.log('点击class="box"触发的程序,自己class="box"则不执行') );
    $('div').on( 'click' , 'p' , () => console.log('点击p标签触发的程序') );

事件委托语法+传参形式

标签对象.on( '事件类型' , '判断条件' , {参数} , 事件处理函数 );
    // 点击name="1"触发的程序
    $('div').on( 'click' ,  '[name="1"]' , {name:'张三'}  , e => console.log(e.data) );  //name:'张三'

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

标签对象.on({事件类型:事件处理函数,事件类型:事件处理函数,事件类型:事件处理函数 });
    $("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语法形式最佳

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。