WebAPI基础（五）知识点
事件对象
-
事件委派 target 事件目标
-
阻止浏览器默认行为
-
事件3个阶段 : 事件捕获 事件目标(触发) <事件冒泡>
-
事件对象兼容处理
JavaScript 三大组成
ECMAScript JS基础学习，JS语法
DOM 文档对象模型 ( Document Object Model ) document
BOM 浏览器对象模型 ( Browser Object Model ) window
定时器
扫描二维码关注公众号，回复：
5083190 查看本文章
单次定时器
多次定时器
BOM
封装了一套操作浏览器的方法，如浏览器刷新，前进后退，跳转页面...
事件
事件对象
JS所有的事件都有事件对象，如果要获取事件对象，获取事件对象需要两个基本步骤
在事件处理函数传入 参数，常用参数名称 event / ev / e
在事件处理函数内部即可使用。
事件对象属性
| 事件对象属性 | 描述 | 备注 |
|---|---|---|
| keyCode | 返回按键编码 | 回车键编码是 13 |
| ctrlKey / altKey / shiftKey | 按下 ctrl / alt / shift 键的时候返回 true | 可用于键盘组合键判断 |
| clientX / clientY | 返回鼠标在<窗口>的坐标值 | 可配合固定定位，基于窗口定位 |
| pageX / pageY | 返回鼠标在<页面>的坐标值 | 可配合绝对定位，基于页面定位 |
| target | 事件目标 | 可用事件目标实现事件委派 |
| preventDefault() 方法 | 阻止浏览器默认行为 | return false 也可以阻止默认行为 |
| stopPropagation() 方法 | 阻止事件冒泡传播 | cancelBubble = true 也可阻止传播 |
事件对象兼容写法
在低版本 IE 浏览器下获取事件对象要通过 window.event 获取事件对象。
事件对象兼容写法：
ev = ev || window.event;
事件三个阶段
-
捕获阶段
-
事件目标(触发阶段)
-
事件冒泡
事件冒泡是事件默认的传播方式，如果对我们造成影响，可以阻止冒泡传播。
阻止事件冒泡传播：
1. 事件对象.stopPropagation(); 方法/函数
2. 事件对象.cancelBubble = true; 属性
事件捕获可通过 addEventListener 的第三个参数修改为 true 实现：
事件源.addEventListener('事件类型', 事件处理函数, 是否捕获);
BOM
BOM 浏览器对象模型 (Browser Object Model)
浏览器提供给我们操作 前进，后退，刷新，改变地址栏 等一些列功能...
核心对象：浏览器顶级对象 ---- window对象
定时器
单次定时器
设置：setTimeout(函数, 时间); 清除：clearTimeout(定时器名称); 特征：时间到了，只会执行一次。
<body>
<input id="btn01" type="button" value="清除炸弹">
</body>
</html>
<script>
/*控制台测试用*/
console.log(window.setTimeout === setTimeout); // true
/*单定时器*/
var timer = window.setTimeout(function () {
alert('3s结束，炸弹爆炸了');
document.body.style.backgroundColor = '#000';
}, 3000);
var btn01 = document.getElementById('btn01');
/*清除定时器*/
btn01.onclick = function () {
window.clearTimeout(timer);
}
</script>
多次定时器
设置：setInterval(函数, 时间); 清除：clearInterval(定时器名称); 特征：时间到了，反复执行，不清除的话，永久执行。
<script>
var num = 3;
var timer = setInterval(function () {
document.body.innerHTML = num;
num--;
/* 如果num的值被减少等于 0 */
if (num < 0) {
clearInterval(timer);
}
}, 1000);
</script>
location对象
操作浏览器地址栏的功能
window.location.href = '新地址';
window.location.assign('新地址');
window.location.replace('新地址');
window.open('新地址');
history对象
操作浏览器历史的功能
1. 前进 history.go(1) / history.forward(); 2. 刷新 history.go(0) 3. 后退 history.go(-1) / history.back();
刷新页面
history.go(0) // 普通刷新1 location.reload(); // 普通刷新2 location.reload(true); // 强制刷新
navigator对象
获取浏览器的信息
window.navigator.userAgent
检测手机操作系统
var UA = window.navigator.userAgent.toLowerCase();
if (UA.indexOf('iphone') >= 0) {
alert('你用iphone啊');
} else if (UA.indexOf('android') >= 0) {
alert('你是安卓啊');
}