jQuery 事件——0717-CSDN博客

本文链接：https://blog.csdn.net/daisy0328/article/details/107529376

1、dom加载完成事件

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
可以在同一个页面中无限次地使用$(document).ready()事件

    $(document).ready(function () {
        console.log("dom加载完成");
    });

2、普通事件

事件可以连点，一个对象绑定多个事件，形成事件流。
给事件处理函数传递的参数在event.data上。

    $(".box").click("user", function (e) {   //第一个参数 给事件处理函数传递的参数
        console.log(e.data);   //user
    }).mouseenter(function () {
        console.log("鼠标进入");
    }).mouseleave(function () {
        console.log("鼠标离开");
    });

3、hover 事件切换

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

    $(".box").hover(function () {
        console.log("悬停");
    }, function () {
        console.log("离开");
    });

4、绑定事件

（1） bind unbind

bind 为每个匹配元素的特定事件绑定事件处理函数。
unbind 移除事件，可以全部移除或移除指定事件。

    $(".btn").bind("click", 1, function (e) {
        console.log("点击事件绑定", e.data);   //点击事件绑定 1
    }).bind("mouseover", function () {
        console.log("mouseover事件绑定");
    }).mouseleave(function () {
        //移除事件 unbind
        //不带参数  全部移除
        //$(this).unbind();    //上边绑定的事件   先执行一次再移除
        //带参数 移除指定事件
        $(this).unbind("click");
    });

（2）on off

绑定事件：

    $(".box").on("click",1,function(e){
        console.log(e.data, "点击事件");
    });

用on写事件的委托：

    $(".box").on("click","#btn",1,function(e){
        console.log(e.delegateTarget, "点击事件的委派元素");   //div.box   点击事件的委派元素
        console.log(e.currentTarget,"目标对象");   //button#btn
    }).on("mouseover",function(){
        console.log("悬停");
    }).on("mouseleave",function(){
        //off 移除事件，可以委派移除
        //不带参  全部移除   也可以过滤移除
        //$(this).off();
        //$(this).off("click");
        //$(this).off("click","#btn");
        $(this).off("mouseover");
    });

off 移除事件，可以委派移除。
不带参，全部移除，也可以过滤移除。

（3）one 绑定一次性事件

绑定的事件只触发一次。

    $(".box").one("mousedown",1,function(e){
        console.log("一次性点击事件", e.data);
    });

5、自动触发指定事件

（1）trigger

传递的参数在事件执行函数里边用形参接收。

    $(window).on("keydown",function(e,a){
        console.log("按键事件", a);
    }).trigger("keydown",1);    //自动触发一次，后边仍然可以被动触发。

on可以绑定自定义事件，trigger 触发。

    $(".box").on("user-key",function(e,a){
        console.log("自定义事件", a);
    }).trigger("user-key",2);

（2）triggerHandler

triggerHandler 触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
只触发jQuery对象集合中第一个元素的事件处理函数。

    $(".box").on("click",function(){
        console.log("box点击事件");
    });
    $("#btn").on("click",function(e,a){
        //常规方式处理事件冒泡
        //e.originalEvent.cancelBubble=true;
        //e.stopPropagation();
        console.log("btn的点击事件",a);
    }).triggerHandler("click",1);  //传递的参数在事件执行函数里边用 形参 接收