进阶篇：jQuery事件（21-1）

饥人谷学习进阶第 21 天

事件处理最头疼的问题：浏览器兼容问题
jQuery封装了很好的API，方便进行事件处理

1.7之前的版本中jQuery处理事件有多个方法（jQuery live blind degelate）作用各不相同，后来统一使用 on / off 方法

.on( events [,selector][,data], handler(eventObject) )

1. events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如 "click"，"keydown.myPlugin",或者 ".myPlugin"
2. selector：一个选择器字符串，用于过滤除被选中的元素中能触发事件的后代元素。如果选择器是null或者忽略了该选择器，那么被选中的元素总是能触发事件。
3. data：当一个事件被触发时，要传递给事件处理函数的event.data。
4. handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成false。

<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    </div>
    <input id="ipt" type="text"> <button id="btn">添加</button>
    <div id="wrap"></div>
</div>

<script>
    $('.box li').on('click', function(){
        var str = $(this).text()
        $('#wrap').text(str)
    })

    // 等同于
    $('.box>ul>li').click(function(){
        var str = $(this).text()
        $('#wrap').text(str)
    })

    // 亦等同于
    $('.box li').on('click.hello', function(){ // 设置事件的命名空间
        var str = $(this).text()
        $('#wrap').text(str)
    })
    // 在解绑事件的时候便于区分绑定事件
    $('.box li').off('click.hello')

    // 如下方法新增元素，但是新增的元素并没有绑定上面的事件
    $('#btn').on('click', function(){
        var value = $('#ipt').val()
        $('.box>ul').append('<li>' + value + '</li>')
    })

    // 可以使用事件代理解决上面的问题
    $('.box ul').on('click', 'li', function() {
        var str = $(this).text()
        $('#wrap').text(str)
    })

    // 复习一下原生JS的事件代理
    document.querySelector('.box li').addEventListener('click', function(e) {
        if(e.target.tagName.toLowerCase() === 'li') {
            // 处理代码
        }
    })

    // 绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
    $('.box').on('click', {name: 'kofe'}, function(e) {
        console.log(e.data)
    })
</script>

.one(events[,selector][,data], handler(eventObject))

同on，绑定事件，但只执行一次

.off(events[,selector][,handler])

移除一个可选选择器元素的事件处理函数

handler参数用于移除一个绑定事件时不是匿名函数而是指向某个事件的函数名，专门移除对应的handler

.trigger(eventType[,extraParameters])

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

不一定是浏览器默认事件，可以是自定义事件

jQuery事件.jpg