本文深入探讨了jQuery中的事件处理机制，包括基本事件类型、常见事件应用、冒泡事件与默认事件行为、高级事件处理如模拟事件、命名空间、事件委托等，并通过实例展示了如何灵活运用这些特性解决实际问题。
Jquery让基于事件来进行响应变的非常简单，总体来说，事件分为五种，分别是鼠标的事件，表单的事件，DOM的事件，键盘的事件，浏览器的事件(类似于resize这种的事件)，但是它们之间的使用方法都差不多，我们可以套用固定的代码模板来操作事件。而且我主要介绍的也是一些非常常用的事件来做例子。先开看Jquery的代码模板,
基本事件：
这里附上基本事件类型的截图
一个元素上面绑定一个事件，将按钮的名称变成Myvalue
$("元素").bind('事件名称',function(e){
});
//例子
$("#button").bind('click',function(e){
$(this).attr('value','MyValue');
});
一个元素绑定多个事件,下面的例子是一个按钮点击一个样式，在点击移除该样式
1 $("元素").bind({ 2 '事件名称':function(e){ 3 4 }, 5 '事件名称2':function(e){ 6 7 } 8 }); 9 var count = 0; 10 $(":button").bind({ 11 'click' : function(e) { 12 count++; 13 if (count % 2 == 0) { 14 $(this).attr('style', 'background:yellow'); 15 } else { 16 $(this).removeAttr("style"); 17 } 18 } 19 })
对于一些我们常用到的事件和一些常用到的场景,
click事件(一次鼠标点击事件);
select事件(当某个下拉列表被选中之后);
change事件(所选元素的value值发生改变，一般用在<input：type="text,select">);
hover事件(当鼠标移到上面时，鼠标指针发生变化)；
focus事件(当聚焦到某个元素时触发的事件,一般用在<input:type="text">的场景);
focusin事件(和Focus的区别是当前元素和子元素任意一个元素获得聚焦后就会触发，而focus只有当前元素才触发);
blur事件(当鼠标失去焦点时触发的时间，一般用户输入一个元素后，自动聚焦到下一个元素);
submit事件(当Form表单提交时触发的事件,一般常用来清空已经输入的内容，多用来实现批量提交，就是输入学生信息或者用户信息时，不用跳转页面);
load事件(最常用的是Documet的Onload事件，一般用在大型资源加载的场景);
ready事件(表示该元素加载完成之后发生的事件);
keydown事件(当一个键被按下去之后产生的事件，一般用来阻止按Enter键重复的提交表单的场景);
bind和直接使用click的区别
要讲清它们之间的关系之前，首先需要讲一下事件的原理，这里以点击事件click为例来说明。
页面中的元素----bind(‘click’)--->绑定了点击事件的元素-----eventListener(事件监听click事件)----->EventHandler处理点击事件------执行相应的function----->返回处理结果。
其实在这个过程中我们发现其实页面中事件监听器只监听页面中绑定了事件的元素，其实就是为该页面元素添加一个Event对象，而页面中并不是所有的元素都需要事件监听，页面中的元素都有其默认的规则，例如button有默认的click事件，超链接也有默认的click事件等等，所以我们如果不使用Jquery或者是JavaScript的话，无论我们怎么点击页面当中的元素，都不会有任何的反应，这是因为事件监听器并不监听这些元素。而Jquery的bind方法就是为元素绑定事件，这里的unbind方法就是为该元素解绑事件，如果为一个元素解绑之后，在使用$("元素").click(function(){//处理事件}),会发现这段代码不会执行，这是因为事件监听器不再监听该元素。Jquery在我们未使用unbind方法时，其实两种实现方式都是可行的，但是bind的方法会比click的范围要广，click事件无法适用于我们添加的DOM元素，例如为一个元素append（“<p id="new">Test</p>”），那么$("#new").click(function{}这段代码也是不会执行的。$("#new").click(function(){})这段代码在执行之前先要在DOM中搜索到id为new的对象，如果不存在的话，它是不会执行后面的代码的。
简单一点理解，就是bind事件是为一个页面元素添加Event对象，如果为该元素点击事件，则会产生一个事件的实例，这个事件的类型为点击，但是该元素可以绑定很多的Event类型，例如change，focus等等这些事件。而使用$('元素').click（function(){}）它有两个限定条件，第一是该元素已经绑定Event对象，第二个是该元素必须是已存在的DOM对象。如果这些条件都满足，那么这两个方法是完全一致的。
冒泡事件和默认事件行为:
概念：冒泡事件是指当子元素和父元素同时绑定同一事件时，当点击子元素会触发子元素的事件和父元素的事件。使得得到无法想要的结果。
对于冒泡事件，Jquery两个函数来处理：
stopPropagation()：如果存在父元素和子元素同时绑定同一事件，默认子元素触发时，父元素也会触发，该方法会阻止父元素的事件触发，只停留在子元素的事件当中
stopImmediatePropagation():如果一个子元素同时绑定同一个事件时有多个方法，默认会顺序执行，该方法会阻止顺序执行，防止下面的效果覆盖掉上面的效果。
1 <div id="top">
2 <div id="child1"></div>
3 <div id="child2"></div>
4 </div>
$("div").css({
'width':'auto',
'height':'200px',
});
$("#top").bind('click',function(){
$(this).css('background','red');
})
$("#child1").bind('click',function(){
$(this).css('background','red');
});
如果在Chlid1区域点击的时候会触发top的click事件，这不是想要的结果，可以通过在child1的函数当中添加stopPropagation元素，那么只有选中的子区域会执行
click事件，父区域就不会执行click事件。
默认事件的概念:
指HTML元素自带的一些事件，如点链接就会跳转页面，点击Submit按钮就会提交等等。
preventDefault()：取消默认的事件，
$("a").bind('click',function(){
$(this).preventDefault();
});
该代码会取消链接的默认行为，产生的效果是，点击超链接之后不会在跳转页面，一般用在取消一些默认的快捷键上面。
高级事件
高级事件的部分主要有四个部分，第一个部分是模拟事件，也就是程序来模拟人的行为来触发事件，例如自动翻页，例如每隔多少秒刷新一次页面，这时候我们都需要用到模拟事件；第二部分是命名空间，也就是为了区分同一个元素绑定了同一个事件，例如我想实现当一个按钮的名称为新增时，点击它时触发一个新增的按钮，当新增达到最大限度时，按钮名称变成减少，点击按钮时删除一个元素。但是此时呢美工人员需要当点击此按钮时触发一段动画。这时候就需要对click事件进行分类，click.add,click.less,click.animate,
这样可以使一个按钮在点击的时候根据一定的逻辑来触发不同的点击事件；第三部分称为事件委托，也就是添加一个子集范围，例如$("#A").delegate("#B"),也就是在A元素的子元素中查找B元素。第四部分是on,off,one,其实这部分内容和bind的功能相同。接下来一一介绍。
模拟事件：
方法:trigger,triggerHandler
参数:trigger(event,data),event指的事件的名称，data是指该事件中需要传递的数据，一般会将data封装成一个数组，然后根据索引的值依次对应事件方法中的参数。
例子：
1 $("button").bind('click',function(e,data1,data2){ 2 location.href=data1+"?"+data2; 3 }) 4 $("button").trigger('click',['https://www.baidu.com','wd=test'])
场景：1.在选择上传文件的时候，默认的<input type=file>中按钮的名称无法修改，此时我们可以自定义上传按钮，当点击上传按钮时，模拟<input type=file>的默认事件。
2.当提交表单的时候，如果填写用户名和密码，如果用户名和密码不正确的时候，我们可以模拟<input type=reset>按钮的事件。
命名空间：
方法：$("button").bind('click.add',function(){//add代码}); $("button").bind("click.less",function(){//减少的代码}); $("button").bind("click.less",function(){//animate})
场景: 其实就是对同一个元素的同一种操作在次进行细分，其实一般做的时候用不到。
事件委托：
方法：$("div").delegate("button",'click',function(){
});
参数说明:div称为父元素，button是DIV的子元素，'click'表示的事件名称，最后一个function是执行一定的逻辑
示例:
1 <button>外面的按钮</button> 2 <div id="divArea" style="background:yellow;height:300px;width:200px;"> 3 <button>里面的按钮</button> 4 </div>
$('#divArea').delegate("button",'click', function () {
$(this).clone().appendTo('#divArea');
});
上面的例子可以看到只要点击里面的按钮时才会触发事件，点击外面的按钮时没有任何反应，其实就是增加了一个查询条件，在divArea下面的button。这条语句理解为divArea子元素button的点击事件。
one方法：
作用：事件只有初次生效，如果是按钮的点击事件，就是按钮点一下之后就不能在点了，
方法:$("div").one(event,function(){//实际操作});
场景：目前没有用到过这个方法。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
