JavaScript 学习笔记（十）jQuery事件 和 jQuery 的动画函数

一、jQuery绑定事件

方法：on()、 one()、 hover() 、常用事件函数

1. on() 方法绑定事件

1-1. 基础绑定事件

语法：元素集合.on('事件类型', 事件处理函数)

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

1-2. 事件委托绑定事件

语法： 元素集合.on('事件类型'，选择器，事件处理函数)

把事件绑定给div 元素，当你在 div 内的 p 元素触发事件的时候，执行事件处理函数

事件委托，把 p 元素的事件委托给了 div 元素来绑定

$('div').on('click', 'p', function () { 
    console.log('我是事件委托形式的事件') 
})

1-3. 批量绑定事件

语法：元素集合.on({ 事件类型1：处理函数， 事件类型2：处理函数 })

注意：不能进行事件委托了

        $('div').on({
            click: function () { console.log('点击事件') },
            mouseover: function () { console.log('鼠标移入事件') },
            mouseout: function () { console.log('鼠标移出事件') }
        })

2. one()绑定事件

用来绑定事件，和 on 方法绑定事件的方式是一样的

区别： one 方法绑定的事件，只能执行一次

2-1. 基础绑定事件

    $('div').one('click', function () { 
        console.log('基础绑定事件')
    })

2-2. 事件委托

    $('div').one('click', 'p', function () {
        console.log('事件委托绑定事件')
    })

2-3. 批量绑定事件

    $('div').one({
        click: function () { console.log('点击事件')},
        mouseover: function () { console.log('鼠标移入事件') },
        mouseout: function () { console.log('鼠标移出事件') }
    })

3. hover()

注意：jQuery 中的一个特殊的事件

语法：元素集合.hover(移入时触发的函数，移出时触发的函数)  

当你只传递一个函数的时候，会在移入移出都