jQuery | 事件

目录

jQuery事件

        jQuery 事件注册

        jQuery 事件处理

        事件处理 on() 绑定事件

        案例：发布微博案例

        事件处理 off() 解绑事件

        自动触发事件 trigger()

        jQuery 事件对象

jQuery其他方法

        jQuery 对象拷贝

        jQuery 多库共存

        jQuery 插件

---

jQuery事件

        jQuery 事件注册

            $('div').click(function () {
                $(this).css('backgroundColor', 'blue');
            })

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

        jQuery 事件处理

        事件处理 on() 绑定事件

  on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

        element.on(events,[selector],fn)         

• 1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
• 2. selector: 元素的子元素选择器 。
• 3. fn:回调函数 即绑定在元素身上的侦听函数。

可以绑定多个事件，多个处理事件处理程序。

            $('div').on({
                mouseenter: function () {
                    $(this).css('backgroundColor', 'blue');
                },
                click: function () {
                    $(this).css('backgroundColor', 'skyblue');
                },
                mouseleave: function () {
                    $(this).css('backgroundColor', 'pink');
                }
            });

如果事件处理程序相同

            // 鼠标经过和鼠标离开都会触发
            $('div').on('mouseenter mouseleave', function () {
                $(this).toggleClass('current');
            })

可以事件委派操作 

        事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

            //  click事件绑定在ul的身上，但是触发的对象是ul里面的小li，然后小li会事件冒泡到父亲ul身上，父亲上面有点击事件，执行程序
            $('ul').on('click', 'li', function () {
                alert(11);
            });

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

            // on 可以给未来动态创建的元素绑定事件
            $('ol').on('click', 'li', function () {
                alert(11);
            });
            var li