break-word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">
break-word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">本章主要介绍jQuery中有几个绑定事件的函数，虽然事件的最终目的都是一样的，但是还是存在着差别，比如有些过时了新的jquery版本中不在支持了，这就需要我们记住其中的差别。在项目中正确选择事件的处理方式。
8-4-1基本事件分为鼠标事件和键盘事件，主要包括如下表格
| 分类 | 事件 | 描述 |
| 鼠标 | click() | 单机鼠标左键时触发 |
| dbclick() | 双击鼠标左键时触发 | |
| 键盘 | keypress() | 键盘按键(Shift、CapsLock等非字符键除外)被按下时触发 |
| keydown() | 键盘按键被按下时触发 |
8-4-2通使用on()方法可以绑定事件，具体代码如下：
| $("#jingfeng18").on("click", function(){
alert( $(this).text() );
}); |
绑定后可通过off()适用于解绑事件方法（如click()事件）或on()方法绑定的事件。具体代码如下：
| $(selector).off(); // 解绑匹配元素的所有事件 $(selector).off('click'); // 解绑匹配元素的指定事件，如click |
8-4-3冒泡事件称之为事件冒泡是指事件的响应会像水泡一样上升至最顶级对象，我们把这种情况就称之为“事件冒泡”。例如示例代码所示
| $('span').click(function() { console.log('span元素被单击了'); }); $('p').click(function() { console.log('p元素被单击了'); }); $('div').click(function() { console.log('div元素被单击了'); }); |
事件冒泡可以通过return来阻止冒泡事件。
8-4-4，通过案例8.4.1来实验一下冒泡事件，通过点击按钮一个个的往上冒泡。
案例8.4.1
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery事件</title> <script src="JQuery/jquery-3.3.1.min.js"></script> </head> <body> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <a href="javascript:;">Click1</a><br/> <a href="javascript:;">Click2</a><br/> <div id="d1" style="width:200px;height:200px; border:1px solid black;"> <a href="del.do" id="a1">Click</a> </div> <div id="d2" style="width:200px;height:200px; border:1px solid black;"> </div> <input type="button" value="click" id="b1" /> </body> <script type="text/javascript"> $(function(){ $('#d1').hover(function(e){ $(this).addClass('s1');},//this代表原始的dom节点,$(this):将原始的dom节点封装成了jQuery对象 function(){$(this).removeClass('s1');}); }); $(function(){ $('a.s1').click(function(e){ alert($(this).html());//$(this):表示当前点击的那个对象.e表示封装之后的那个事件对象,依据事件对象找到事件源 var obj = e.target; //obj是原始的dom节点 alert(obj.innerHTML); alert($(obj).html());//$(obj):将原始的dom节点封装成了jQuery对象 }); $('#d1').click(function(e){ alert('you clicked the div');//因为click()方法执行完之后，返回的仍然是$('#d1')那个对象，所以可以写成这样的一种结构: $(选择器).click().click() }).click(); $('#a1').click(function(e){ alert('你点击了一个链接'); e.preventDefault();//停止默认行为 e.stopPropagation();//停止冒泡 }); $('#d2').click(function(e){ $(this).html('x= '+e.pageX+' y= '+e.pageY);//event.pageX/pageY: 点击的坐标 }); }); </script> </html> |