【写在前面】前端时间也去试了个水参加了一下网管的考试，上午感觉还不错，下午就有点懵了，上周也没有更新我的博客了，今天我们就针对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.片尾彩蛋

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()方法体里面就可以。

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)); //派发自定义事件})
})