jQuery event,冒泡,默认事件用法
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 >
<div >div001
<div >cdiv001
<span >span001
<a href="#">link</a>
</span>
</div>
</div>
<div >div002
<input />
<input />
</div>
<div >div003</div>
<div>
<button >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';
}