jquery-事件对象[上]
<body style="height: 2000px;">
<input type="button" value="按钮">
<div style="width: 200px;height: 200px;background:#ccc;">
<span style="width: 100px;height: 100px;background:#eee;display: block;"></span>
</div>
</body>
<script>
$(function () {
$('input').bind('click', function (e) {
console.log(e.type);
});
--------------------------------------------------------------------------------------
target和currentTarget的区别
target是获取触发元素的DOM，触发元素，就是你点了哪个，就是哪个
currentTarget得到的是监听元素的DOM，你绑定的哪个就是哪个
$('div').bind('click', function (e) { //点div得到div，点击div里的span，得到span
alert(e.target);
});
$('div').bind('click', function (e) { //点击div得到div，点击div里的span，还是得到div
alert(e.currentTarget);
});
--------------------------------------------------------------------------------------
relatedTarget用mouseover和mouseout
$('span').bind('mouseover', function (e) { //移入span时，邻近的是div，移入span时，邻近的是body mouseout也一样的用法
console.log(e.relatedTarget);
})
$('div').bind('click', function (e) {
console.log(this == e.currentTarget); //true
})
--------------------------------------------------------------------------------------
获取额外数据
$('input').bind('click', 123, function (e) {
console.log(e);
alert(e.data);
})
$('input').bind('click', '123', function (e) {
console.log(e);
alert(e.data);
})
$('input').bind('click', [1, 2, 3, 'a', 'b'], function (e) {
console.log(e);
alert(e.data[3]);
})
$('input').bind('click', { user: 'Lee', age: 100 }, function (e) {
console.log(e);
alert(e.data.user);
})
--------------------------------------------------------------------------------------
pageY、screenY、clientY的区别
$(document).bind('click', function (e) {
alert(e.pageY + ',' + e.screenY + ',' + e.clientY); //加滚动条差别就很大
})
--------------------------------------------------------------------------------------
e.result的用法
$('input').bind('click', function (e) {
return 123;
});
$('input').bind('click', function (e) {
alert(e.result);
});
--------------------------------------------------------------------------------------
获取事件触发的时间戳
$('input').bind('click', function (e) {
alert(e.timeStamp);
});
--------------------------------------------------------------------------------------
判断鼠标的左中右键
$('input').bind('mousedown', function (e) {
console.log(e.which);
});
--------------------------------------------------------------------------------------
得到键盘的按键,封装好的，特别好用
$('input').bind('keyup', function (e) {
alert(e.which);
});
$('input').bind('click', function (e) {
alert(e.ctrlKey); //按着ctrl键再点击的时候弹出true
});
})
</script>
