jQuery事件绑定

jQuery事件绑定
开发工具与关键技术：Visual Studio jQuery
作者：盘子
撰写时间：2019年4月15日
jQuery的事件分类可以分为：页面载入、事件处理、事件委派、事件切换，每种事件都有一个或者多个对应的函数。
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
jQuery 事件处理方法中的事件绑定和解绑也有几个相对应的函数值：
on() 在选择元素上绑定一个或多个事件的事件处理函数
blind() 为每个匹配元素的特定事件绑定事件处理函数
one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数
off() 在选择元素上移除一个或多个事件的事件处理函数
unbind() bind()的反向操作，从每一个匹配的元素中删除绑定的事件
trigger() 在每一个匹配的元素上触发某类事件
triggerHandler() 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但 不会执行浏览器默认动作，也不会产生事件冒泡。
下面做了个on() 事件的绑定，代码如下图，见截图：如图，给一个按钮绑定了一个on()点击事件。

jQuery on()方法是官方推荐的绑定事件的一个方法，可多个事件绑定。鼠标事件，表单事件与键盘事件的特点是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。而所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。
基本用法：on(events,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数。
最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
快捷方式 $("#elem").click(function(){})
on方式 $("#elem").on(‘click’,function(){})
最大的不同点就是on是可以自定义事件名，还可以
多个事件绑定同一个函数： 通过空格分离，传递不同的事件名，可以同时绑定多个事件
$("#div1").on(“mousedownmouseup”, function (e) {
$(this).text(“触发事件：” +e.type); e为事件对象});
多个事件绑定不同函数：
通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法
$("#div2").on({
mousedown: function (e) {
$(this).text(“触发事件：” +e.type); },
mouseup: function (e) {
$(this).text(“触发事件：” +e.type);
}
});
通过.on()绑定的事件处理程序可以通过off() 方法移除该绑定，根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除：
$("#div2").off(“mouseup”);//移除div2的mousedown 和mouseup事件
$("#div3").off();//off()不带参数 快捷方式删除所有事件
下面是样式的部分代码，见截图如下：

最后展示的是效果图，见截图如下：（从左到右）最开始的展示效果是只有一个蓝色的按钮，点击按钮弹出提示框点击确定，开始动画。先执行完第一个动画再执行第二个动画（动画方向如图中箭头所示先下展开再上收），