// 基本语法形式 $().on( 事件类型 , 事件处理函数 )
// 删除事件处理函数
// 必须绑定的是 函数名称 才能删除 绑定的事件处理函数
// $().off( 事件类型 , 事件处理函数名称 )
// $('div').on( 'click' , ()=>{
// console.log(123);
// } )
// 可以同时绑定多个事件类型
// $('div').on( 'click' , ()=>{console.log(456)}).on( 'mouseover' , ()=>{console.log('我进来了')} ).on('mouseout' , ()=>{console.log('我出来了')})
// 必须绑定的是函数名称,才能删除绑定的函数
$('div').on('click' , fun1).on('click' , fun2).on('click' , fun3);
// 删除
$('div').off('click' , fun2);
function fun1(){
console.log(111)
}
function fun2(){
console.log(222)
}
function fun3(){
console.log(333)
}
// jQuery中事件绑定语法形式2
// 定义第二个参数:参数是对象的语法形式
// 第三个参数:事件处理函数中,定义一个形参,一般是 e 或者 event
// jQuery会自动向其中存储数据信息
// e.data,存储的是参数2,定义的对象
// 作用就类似于给函数传参
$('div').on('click' , {name:'张三' , age:18} , e=>{
console.log(e);
})
// 事件委托:
// 是代码编写的一种方式
// 给父级添加事件,通过判断触发事件的对象,执行不同的程序
// 解决:动态生成的标签,无法直接获取标签对象
// 与js方法基本相同,通过触发事件的目标,执行程序
// $('div').on('click' , e=>{
// if(e.target.tagName === 'LI'){
// console.log($(e.target).index()+1) ;
// }
// })
// jQuery,事件绑定时,可以直接通过设定事件委托
// 定义触发事件的具体标签对象的条件
// 这个条件是 jQuery 选择器支持的语法就可以
$('div').on('click' , 'span' ,e=>{
console.log('我是span标签');
})
$('div').on('click' , '#p1' ,e=>{
console.log('我是p标签');
})
$('div').on('click' , 'ul>li' ,e=>{
console.log('我是li标签');
})
$('div').on('click' , '[name="h1"]' ,e=>{
console.log('我是h1标签');
})