【jquery常见事件】Jquery常见事件应用汇总【附应用场景】

【写在前面】前端时间也去试了个水参加了一下网管的考试，上午感觉还不错，下午就有点懵了，上周也没有更新我的博客了，今天我们就针对jquery事件领域做一个汇总介绍吧，主要介绍jquery的点击事件、鼠标事件、派发事件、阻止冒泡事件、绑定与解绑事件及自定义事件。
涉及知识点：jquery双击事件、单击事件、jquery派发事件、阻止冒泡、绑定与解绑事件、jquery鼠标移动事件等。

【皇榜】支持博主的可以一睹皇榜哟，等您上榜！

版权声明：原创于CSDN博主-拄杖盲学轻声码，有疑惑可去留言私信哟！

1、jquery点击事件与双击事件

其实在我们使用jquery的过程中，用到最多的应该是点击事件了，一般比如说我们点击按钮将数据进行提交（保存）的时候，就会经常用到这个，当然也可以在div中用onclick()事件和ondbclick()事件，效果一样。
Jquery点击事件应用：
语法：

$("#connect").click(function(){
    
    
    //下面填写点击后的流程
})

Jquery双击事件应用：
语法：

$("#connect").dbclick(function(){
    
    
    //下面填写双击后的流程
})

2、Jquery绑定与解绑事件

针对绑定事件，我个人觉得用的最多的是下拉触发事件，还有一点就是当我们用了解除绑定后再触发绑定事件，可以消除之前的事件没有清除，可能会引发多次执行的效果。

2.1 Jquery绑定事件应用

主要是on和bind两个绑定事件，他们两个实现效果一样，也存在区别bind是针对每个子节点都添加了，但是on的话是针对设置的dom。如果页面元素没有加载前使用bind的话会失效。
语法：

$("#keButton").on("click",function (){
    
    
    //后面填写点击事件后执行逻辑
})
$("#keSelect").on("change",function (){
    
    
    //后面填写下拉改变事件后执行逻辑
})
$("#keButton").bind("click",function (){
    
    
    //后面填写点击事件后执行逻辑
})

复杂用法：

//大括号替代方式
$(".header").on({
    
    
    "mouseout": function () {
    
    
        alert("这是mouseout事件!");
    },
    "click": function () {
    
    
        $(".container").slideToggle();
    }
}, ".btn-test");

2.2 Jquery取消绑定事件应用

和上面一样也存在两个off和unbind，正常使用一般是移除on/bind的事件
如下所示点击按钮后移除段落标签的点击事件。
语法：

$("button").click(function(){
    
    
    //点击按钮后移除P标签所有的点击事件
    $("p").off("click");
});

常见用法和on一起

$("#keButton").off("click").on("click",function (){
    
    
    //先清除原先的点击事件再添加点击事件
})

当你发现你点击了一次，但是方法体却执行了两次，这个时候你就可以使用这种方法，在执行点击前针对原有dom的点击事件做个取消绑定的操作。

3、Jquery触发（派发）事件

Jquery触发事件我暂且定义为主动触发
语法：

//主动触发点击事件
$("button").trigger("click");

使用场景，修改某个下拉框自动触发按钮点击事件

$("#keSelect").off("change").on("change",function (){
    
    
    //后面填写下拉改变事件后执行查询按钮主动触发
    $(".searchBtn").trigger("click");
})

其实在jqgrid表格重新刷新的时候我们会经常发现这个事件。

4、阻止事件冒泡及默认行为

4.1 为何要阻止冒泡

我给大家举个例子哈，如下所示的两个节点

<div class="btn1" onclick="load()">
    <div class="btn2" onclick="change()"></div>
</div>

Btn1上面有点击事件load，btn2有点击事件change();
但是btn1是btn2的父结构，也就意味着btn2点击的时候既有load又有change，但是我本意是点击btn2的时候并不想执行load()。
这个时候我们就要去做一件事情了，那便是阻止事件冒泡，让btn2点击事件里面只有change一个方法，希望这样解释大家能够明白一些。

4.2常用语法

event.preventDefault();//取消默认行为
event.stopPropagation(); //阻止向上级冒泡
event.stopImmediatePropagation(); //阻止之后的所有冒泡事件
return false; //事件里返回false，即取消冒泡也取消默认行为

使用的时候就放在change()方法体里面就可以。

版权声明：原创于CSDN博主-拄杖盲学轻声码，有疑惑可去留言私信哟！

5、jquery自定义事件

5.1定义过程：

A : var myEvt = $.Event(“自定义事件名称”); //创建自定义事件,类似 as3中
类似flex中 var myEvt = new Event(“myEvent”)
B : $(“发出事件对象”).trigger(myEvt); //派发事件，as3中
类似flex中this.dispatcher(myEvt);
C: $(“监听事件对象”).on(“自定义事件名称”, function(event){
//监听事件
//处理event;
console.log(event;)
})

5.2 实际应用

$.extend({
    
    
 myFun:function (event,data) {
    
    
       $(event.target).html(data); //设置数据
   }
});
// DOM加载后
$(function () {
    
    
    //注册自定义事件
    $("span").on("myEvent",function (event,data) {
    
    
        $.myFun(event,data); // 调用jQuery自定义方法
        return false; 
        //等同于event.preventDefault(); + event.stopPropagation();
    });
    $("#jisuan").on("click",function () {
    
    
        var val1 = $("input[type='text']").val();
        //方法一 直接设置
        /*$("span").html(eval(val));*/
        //方法二 通过自定义事件+自定义jQuery方法
        var evt = $.Event("myEvent"); //创建自定义事件
        $("span").trigger(evt,eval(val1)); //派发自定义事件
    })
})

6.片尾彩蛋

倾心打造佳作，愿解君之惑，如若有幸，盼君上榜助阵，特此敬谢！
皇榜入口点击此处