jQuery之用on统一 了事件注册方式

目录

一、on简单注册事件

二、on委托事件

三、事件的链式

---

一、on简单注册事件

• 不支持动态注册事件

$('div').on('click', function() {
    console.log("我是单击事件")
})

•  注册多个事件

$('div').on({
    'click': function() {
        console.log('单击事件')
    },
    'mouseenter': function() {
        console.log('这是一个鼠标移入事件')
    }
})

二、on委托事件

• 支持动态绑定事件
• 参数一：触发的事件
• 参数二：触发事件的子元素
• 参数三：触发事件执行的回调函数

$('parent').on('click', 'div, span', function() {
    console.log("我是单击事件")
})

总结：给父元素绑定事件，当我们点击触发事件的子元素时触发事件 ，

注意：this是点击触发事件的子元素

三、事件的链式

$('div').on('mouseenter', function() {
    console.log("我是鼠标移入事件")
}).on('mouseleace', function() {
    console.log("我是鼠标移出事件")
})