JS jQuery事件处理

一、绑定事件

用on来绑定可以同时绑定多个事件

            $('.box').on({ // 用on来一次性绑定多个事件
                mouseenter: function () {
                    $(this).css('background', 'red');
                },
                mouseleave: function () {
                    $(this).css('background', 'pink');
                }
            })

或者给两个事件同时绑定一个效果

            $('.box').on('mouseenter mouseleave', function () {
                $(this).toggleClass('current');
            })

二、事件委托

click绑定在ul上，但是触发对象是li，通过这种方法可以给动态添加的元素绑定事件。

            $('ul').on('click', 'li', function () {
                alert('1');
            })

三、事件解绑

            $('.box').off(); // 事件全部解绑
            $('.box').off('click'); // 事件只解绑click

四、一次性事件

            $('.box').one('click', function () { // 一次性事件
                alert(1);
            })

五、自动触发事件

1.元素.事件触发

            $('.box').click(); // 相当于触发box的点击事件

2.trigger自动触发事件

效果和第一个相同

            $('.box').trigger('click'); // 相当于触发box的点击事件

3.triggerHander自动触发事件

触发时不会进行元素的默认行为，如文本框自动获得焦点。

            $('.box').triggerHandler('click');