jQuery基础 —— 事件

近期在巩固基础知识，回头看看js基础，数据类型、数据类型之间的转换、操作符等等，这个东西容易忘记，就想回头再看看，接着着重再看下隐式转换的问题。事件基础在JavaScript中也学习了一部分，今天看jQuery的事件的时候也是相对比较容易接受的。方法的使用都很相似，重要的是得记住方法，以及方法里面得参数。

来吧，看知识点。

 

事件注册 

ele.事件 

通常我们都是使用 ele.事件() 的形式注册事件，这样的事件注册方式的缺点是一个元素对象一次只能注册一个事件，如果元素需要注册多个事件的话就需要写相同的代码，这样代码就冗余了。

            // 事件注册
            // 1. ele.事件() 一次只能注册一个事件
            $("div").click(function () {
                alert("哈哈");
            })

 

 on()事件

 on()可以注册多个事件

一个元素如果需要同时注册多个事件，需要使用on() 来注册事件。on()事件有两种方式。

第一种方式：以对象的形式传事件

            // 方式一：ele.on({
            //     事件1：function(){},
            //     事件2：function(){}
            // })
            $("div").on({
                click: function () {
                    console.log("div被点击了");
                },
                mouseenter: function () {
                    console.log("鼠标经过了");
                },
                mouseleave: function () {
                    console.log("鼠标离开了");
                }
            })

第二种方式：ele.on("事件1 事件2",function(){})

            // 方式二：ele.on("事件1 事件2",function(){})
            $("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("bgColor");
            })

  

 

on() 进行事件委托

on() 事件还可以进行事件委托，事件委托是指：把事件绑定在元素的父级上面而不是元素本身上。

ele.on("事件"[,"子选择器"],function(){})

            // ele.on("事件"[,"子选择器"],fn)
            // 表示 事件绑在ele身上，但是是ele的子元素触发的
            $("ul").on("click", "li", function () {
                console.log("li被点击了"); // click事件绑在ul身上，但是是ul中的li触发的事件
            })

 

 

事件解绑

off() 事件解绑 on() 事件

off() 事件的形式和 on() 事件形式类似。

            // 解绑事件 off
            $("div").off(); // 解除div上的所有事件
            $("div").off("click"); // 解除div上面的click事件
            $("ul").on("click", "li"); // 解除ul里li会触发的click事件

这样就解除了绑定在元素身上的事件，off() 事件同样可以解除事件委托。

 

 

one() 一次事件 

一次事件只执行一次，往后再也不执行了

            // 一次事件 one("事件",fn) 指只触发一次
            $("p").one("click", function () {
                $(this).addClass("bgColor");
            })

 

自动触发事件

让元素自动触发自动的事件。有三种方式。

ele.事件()

            // a. ele.事件()
            $("span").on("click", function () {
                $(this).addClass("fontColor");
            })
            // $("span").click(); // 自动触发span的点击事件

 ele.trigger("事件") 

            // b. ele.trigger("事件")
            $("span").trigger("click");

ele.triggerHandler("事件")  —— 可以阻止元素的默认行为

            $("input").on("focus", function () {
                console.log("获得焦点");
                $(this).val("默认文本");
            })
            // c. ele.triggerHandler("事件") 阻止默认行为 eg：表单获焦点有光标出现
            $("input").trigger("focus"); // 获得焦点时，表单中会有光标在闪烁
            // $("input").triggerHandler("focus"); // 没有光标闪烁

                   

 

ok，今天完成。