【写在前面】前端时间也去试了个水参加了一下网管的考试，上午感觉还不错，下午就有点懵了，上周也没有更新我的博客了，今天我们就针对jquery事件领域做一个汇总介绍吧，主要介绍jquery的点击事件、鼠标事件、派发事件、阻止冒泡事件、绑定与解绑事件及自定义事件。
涉及知识点：jquery双击事件、单击事件、jquery派发事件、阻止冒泡、绑定与解绑事件、jquery鼠标移动事件等。
目录
- 1、jquery点击事件与双击事件
- 2、Jquery绑定与解绑事件
- 2.1 Jquery绑定事件应用
- 2.2 Jquery取消绑定事件应用
- 3、Jquery触发（派发）事件
- 4、阻止事件冒泡及默认行为
- 4.1 为何要阻止冒泡
- 4.2常用语法
- 5、jquery自定义事件
- 5.1定义过程：
- 5.2 实际应用
- 6.片尾彩蛋
版权声明：原创于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.片尾彩蛋
倾心打造佳作，愿解君之惑，如若有幸，盼君上榜助阵，特此敬谢！
