jQuery event,冒泡,默认事件用法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <title>b index</title> <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'> <style type="text/css"> .s1{ width: 100px; height: 100px; background-color: pink; } .s2{ width: 50px; height: 50px; background-color: green; } </style> </head> <body style="margin:1px;"> <div id="div001">div001 <div id="cdiv001">cdiv001 <span id="span001">span001 <a href="#">link</a> </span> </div> </div> <div id='div002'>div002 <input id="txt001" /> <input id="txt002" /> </div> <div id='div003'>div003</div> <div> <button id="btn001">click me to check e.result </button> </div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="b/js/bootstrap.js"></script> <script type="text/javascript" src="js/index039.js"></script> </body> </html>
$(function() { $('#div001').click(div001Click); $('#cdiv001').click(div001Click); $('span').click(div001Click); $('a').click(div001Click); $('#txt001').keydown(txt001Keydown); $('#txt002').keydown(txt001Keydown); $('#txt002').mousedown(txt002Mousedown); $('#btn001').click(btn001Click01); $('#btn001').click(btn001Click02); }); function div001Click(e) { console.log('currentTarget:' + e.currentTarget.id + "--" + e.type); console.log('target:' + e.target.id + "--" + e.type); // 这样可以阻止事件冒泡； // e.stopPropagation(); // 这样也可以阻止事件冒泡； // return false; // 这样可以阻止默认行为，a标签就不会自动跳转导航了；但是不会阻止事件冒泡； e.preventDefault(); // 这样也可以阻止默认行为，但同时也把事件冒泡阻止了； // return false; } function txt001Keydown(e) { /** * 在txt002中按下了字母a，e对象jQuery.Event如下： * * altKey: false 是否按了alt * bubbles: true * cancelable: true * char: undefined * charCode: 0 * ctrlKey: false 是否按了ctrl * currentTarget: input#txt002 * data: null * delegateTarget: input#txt002 * eventPhase: 2 * handleObj: Object * isDefaultPrevented: function returnFalse() { * jQuery111108223536524455994: true * key: undefined * keyCode: 65 字母a就是65，不论是否按了shift键； * metaKey: false 是否按了meta键，大多数键盘上并不存在Meta键，该键存在于MIT计算机、Mac计算机或Sun公司的一些计算机键盘上。 * originalEvent: KeyboardEvent * relatedTarget: undefined * result: "txt001KeydownReturn" 如果在return之前进行了debug暂停，是看不到这个值的；api说明：当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。 * shiftKey: false 是否按了shift * target: input#txt002 * timeStamp: 1447392527314 * type: "keydown" * view: Window * which: 65 到底按的是哪个键或按钮； * __proto__: Object * */ console.log('target:'+e.target.id+'---'+e.which); console.log(e); return 'txt001KeydownReturn'; } function txt002Mousedown(e) { /** * 在txt002上点击鼠标左键/右键/中间滚轮： * * altKey: false * bubbles: true * button: 0/2/1 0表示鼠标左键/2表示鼠标右键/1表示鼠标中间轮 * buttons: undefined * cancelable: true * clientX: 382/384/384 * clientY: 69/61/61 * ctrlKey: false * currentTarget: input#txt002 * data: null * delegateTarget: input#txt002 * eventPhase: 2 * fromElement: null * handleObj: Object * isDefaultPrevented: function returnFalse() { * jQuery1111020544881583191454: true * metaKey: false * offsetX: 125/127/127 * offsetY: 23/15/15 * originalEvent: MouseEvent * pageX: 382/384 * pageY: 69/61 * relatedTarget: null * result: "txt002MousedownReturn" 如果在return之前进行了debug暂停，是看不到这个值的；api说明:当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。 * screenX: 277/278 * screenY: 221/215 * shiftKey: false * target: input#txt002 * timeStamp: 1447393382134/1447393383781/1447393386565 事件触发时距离1970年1月1日的毫秒数 * toElement: input#txt002 * type: "mousedown" * view: Window * which: 1/3/2 1表示鼠标左键/3表示鼠标右键/2表示鼠标中轮 * __proto__: Object * */ console.log(e); return 'txt002MousedownReturn'; } function btn001Click01(e) { console.log('btn001Click01'); // 在控制台查看这个e.result竟然是btn001Click02Result； console.log(e); return 'btn001Click01Result'; } function btn001Click02(e) { console.log('btn001Click02'); // 在控制台查看这个e.result竟然也是btn001Click02Result； console.log(e); // 返回当前事件事件最后触发的那个处理函数的返回值；的确是btn001Click01Result console.log(e.result); return 'btn001Click02Result'; }