一. 事件流
1. 事件流
- 事件接收的顺序(冒泡, 捕获)
- 冒泡: 从内到外
- 捕获: 从外到内
2. 事件的三个阶段
3. 阻止冒泡
- e.stopPropagation() 非ie
- e.cancelBubble = true; ie
- 兼容写法:
// 兼容写法
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
4. 捕获
- 默认冒泡(false)
- 格式: addEventListener("事件", function(){}, {capture: true/false,once: true/false})
*capture 捕获方式(true: 捕获, false: 冒泡)
*once: true 只能点击一次
oBtn.addEventListener("click", function() {
console.log('oBtn');
}, {capture: true, once: true}
);
二. 默认行为
1. 默认行为
- a标签, 默认有跳转的行为
- 表单form默认有提交行为
- 右击菜单默认oncontextmenu
- 图片默认可以拖曳
- 默认按 ctrl + shift + r 是刷新
2. 阻止默认行为
- return false; 表单
- 在img标签上写: ondragstart = "return false" 防止图片拖曳
- e.returnValue = false; ie
- e.preventDefault(); 非ie
- 兼容写法:
// 兼容写法
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
三. 事件监听
- addEventListener("事件", func) 添加监听事件
- removeEventListener("事件", func) 移除监听事件
*这里的事件不需要加 'on'
*func使用的是外部函数,注意不用加小括号
*能绑定多次事件
注意: 添加事件与移除事件,必须是同一个函数,才有效
<body>
<button class="add">监听事件</button>
<button class="remove">移除事件</button>
<div class="box"></div>
</body>
<script>
var oBox = document.querySelector('.box');
var oAdd = document.querySelector('.add');
var oRemove = document.querySelector('.remove');
// 1) 添加监听事件
oAdd.onclick = function() {
oBox.addEventListener('click', fun);
};
// 2) 移除监听事件
oRemove.onclick = function() {
oBox.removeEventListener('click', fun);
};
// 3) 添加与移除的监听事件必须是同一个函数,才有效
function fun() {
console.log('哈哈哈哈哈');
}
</script>
