【前端】jQuery事件

目录

 一、jQuery事件

1.1事件注册

1.2事件处理

1.2.1事件处理on()绑定事件

1.2.2事件处理off()解绑事件

1.2.3自动触发事件trigger()

1.3事件对象

二、jQuery其他方法

2.1jQuery拷贝对象 

2.2多库共存

2.3jQuery插件

---

 一、jQuery事件

1.1事件注册

        element.事件(function(){})

1.2事件处理

1.2.1事件处理on()绑定事件

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

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

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

on()方法优势：

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

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

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

            //绑定一个事件
            $("div").on({
                mouseenter: function () {
                    $(this).css("background", "pink");
                },
                click: function () {
                    $(this).css("background", "red")
                }
            });

            //绑定多个事件
            $("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current")
            })

            //事件委托
             $("ul").on("click", "li", function () {
                alert(11);
            });    //绑定在ul上，但是触发事件是ul上的li

            //动态创建
            $("ol").on("click", "li", function () {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

1.2.2事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

            $("div").off();//解除div身上的所有事件
            $("div").off("click");//解除div身上的点击事件
            $("ul").off("click","li");//解除事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件。

1.2.3自动触发事件trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击左右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

           // 自动触发事件
            // 1.元素.事件()
            $("div").click();
            // 2.元素.trigger("事件")
            $("div").trigger("click");
            // 3.元素.triggerHandler("事件") 就是不会触发元素的默认行为
            $("div").triggerHandler("click");

1.3事件对象

事件被触发，就会有事件对象的产生。

            element.on[events,[selector],function(event){}]

阻止默认行为：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

二、jQuery其他方法

2.1jQuery拷贝对象 

如果想要把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()方法

            $.extend([deep], target, object1, [objectN])

1. deep：如果设为true为深拷贝，默认为false浅拷贝
2. target：要拷贝的目标对象
3. object1：待拷贝到第一个对象的对象
4. objectN：待拷贝到第N个对象的对象
5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
6. 深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象

2.2多库共存

让jQuery和其他的$库不存在冲突，可以同时存在，这就叫做多库共存。

jQuery解决方案：

1. 把里面的$符号统一改成jQuery，比如jQuery("div")
2. jQuery变量规定新的名称：$.noConflict()  var xx=$.noConflict();

2.3jQuery插件

jQuery插件常用的网站:

jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)

jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)