<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18_事件绑定与解绑</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.out {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.inner {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.divBtn {
position: absolute;
top: 250px;
}
</style>
<body style="height: 2000px;">
<div class="out">
外部DIV
<div class="inner">内部div</div>
</div>
<div class='divBtn'>
<button id="btn1">取消绑定所有事件</button>
<button id="btn2">取消绑定mouseover事件</button>
<button id="btn3">测试事件坐标</button>
<a href="http://www.baidu.com" id="test4">百度一下</a>
</div>
<!--
1. 事件绑定(2种)：
* eventName(function(){})
绑定对应事件名的监听, 例如：$('#div').click(function(){});
* on(eventName, funcion(){})
通用的绑定事件监听, 例如：$('#div').on('click', function(){})
* 优缺点:
eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
* off(eventName)
3. 事件的坐标
* event.clientX, event.clientY 相对于视口的左上角，不会随着页面滚动而移动
* event.pageX, event.pageY 相对于页面的左上角
* event.offsetX, event.offsetY 相对于事件元素左上角，当前事件元素
4. 事件相关处理
* 停止事件冒泡 : event.stopPropagation()
* 阻止事件默认行为 : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
需求：
1. 给.out绑定点击监听(用两种方法绑定)
2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
3. 点击btn1解除.inner上的所有事件监听
4. 点击btn2解除.inner上的mouseover事件
5. 点击btn3得到事件坐标
6. 点击.inner区域, 外部点击监听不响应
7. 点击链接, 如果当前时间是偶数不跳转
*/
$(function () {
// 1.给class为out的div的点击事件绑定监听函数，打印'out clicked'(用两种方法绑定)
/*$('.out').click(function () {
console.log('out click1')
})*/
$('.out').on('click', function () {
console.log('out clicked2')
})
//2.给class为inner的div的鼠标移入和鼠标移出事件绑定监听函数
/*$('.inner')
.mouseenter(function () {
console.log('进入...')
})
.mouseleave(function () {
console.log('离开...')
})*/
$('.inner')
.on('mouseenter', function () {
console.log('进入...')
})
.on('mouseleave', function () {
console.log('离开...')
})
/*$('.inner').hover(function () {
console.log('进入...')
}, function () {
console.log('离开...')
})*/
//3. 点击btn1解除inner上的所有事件监听
$('#btn1').click(function () {
$('.inner').off()
})
//4.点击btn2解除inner上的mouseover事件
$('#btn2').click(function () {
$('.inner').off('mouseover')
})
//5. 点击btn3得到事件坐标
$('#btn3').click(function (event) {
console.log(event.offsetX, event.offsetY)//事件元素左上角
console.log(event.clientX, event.clientY)//窗口左上角
console.log(event.pageX, event.pageY)//页面左上角
})
//6. 点击.inner区域, 外部点击监听不响应
$('.inner').click(function (event) {
console.log('click inner')
// 停止事件冒泡，冒泡从内到外
event.stopPropagation()
})
//7. 点击链接, 如果当前时间是偶数不跳转
$('#test4').click(function (event) {
var time = Date.now()
alert(time)
if(time%2===0) {
// 阻止事件默认行为
event.preventDefault()
}
})
})
</script>
</body>
</html>
展示
