WebsAPI（五）——事件委托、定时器
（一）事件对象的公共属性和方法
1.公共属性
事件对象.target 获取最先触发的元素
this指向事件源，target指向最先触发的元素，即冒泡事件中的目标元素
子孙元素可以共享上级元素的事件
2.公共方法
1）事件对象.preventDefault(); 阻止默认行为
在a标签中href="javascript:"。
或在script代码最后加return:false（推荐，无兼容性问题）。
或：e.preventDefault();（有兼容性问题）。
<script>
var a = document.querySelector('a');
a.onclick = function(e) {
alert('hello');
e.preventDefault();
};
</script>
2）事件对象.stopPropagation(); 停止冒泡传播
<script>
var divs = document.querySelectorAll('div');
for(var i = 0; i < divs.length; i++) {
divs[i].onclick = function(e) {
alert(this.className);
e.stopPropagation();
}
}
</script>
（二）事件委托
从性能角度：函数也是一种数据类型，也需要存储在内存中。所以注册的事件越多，开辟的内存空间越多。浏览器在注册事件时也是耗时的， 注册的事件越多耗时越长。
从动态操作元素角度：动态添加的元素需要重新注册事件。
1.事件委托
只需要注册一个事件就可以，不管是原有的子孙元素，还是未来动态添加的子孙元素，都可以实现功能。
2.事件委托的实现
把子孙元素的事件委托给上级元素。
1）获取上级元素，给上级元素注册事件。
2）通过事件对象的target，获取最先触发的元素
3）可以选择使用nodeName检测是否是指定的元素
代码举栗：
<script>
var ul = document.querySelector('ul');
ul.onclick = function(e) {
if(e.target.nodeName == 'LI') {
alert(e.target.innerText);
}
};
</script>
3)可以选择类名className检测是否为指定元素
代码举栗：
<body>
<button>添加</button>
<div class="list">
<h3>标题1</h3>
<h3 class="box">标题2</h3>
<h3>标题3</h3>
<p class="box">段落1</p>
<p>段落2</p>
<p>段落3</p>
<p class="box">段落4</p>
</div>
<script>
var div = document.querySelector('div');
div.onclick = function (e) {
var t = e.target;
if(t.className == 'box'){
alert(t.innerText);
}
}
</script>
</body>
3.扩展：事件对象兼容性问题
事件对象：事件处理的第一个形参，是标准的。形参相当于一个变量。
在IE8中console.log(e)获取不到对象，返回undefined;可以用window.event
方法1代码举栗：
<script>
document.onclick = function (e) {
var _e;
if (e != undefined) {
_e = e;
}
else {
_e = window.event;
}
//IE低版本获取事件对象：widow.event;
// console.log(window.event);
console.log(_e);
}
</script>
方法2代码举栗：
<script>
document.onclick = function (e) {
var _e = e || window.event; //返回为true的值
console.log(_e);
}
</script>
任何数据都可以参与任何运算。
左侧数据 || 右侧数据：若左侧数据能转换为布尔值且值为true时，就输出左侧数据，否则输出右侧数据。
左侧数据 && 右侧数据：若左侧数据能转换为布尔值且值为false时，输出左侧数据，否则输出右侧数据。
1&&2 //返回2
0&&2 //返回0
（三）BOM
浏览器对象模型
1.window对象
window对象是顶级对象（或全局对象）
获取window对象：window;
定义的全局变量或全局函数都会成为window对象的属性和方法，都可以用window对象来调用，在使用时可以忽略window。
<script>
var a = 123;
var fn = function() {alert('执行fn')};
console.log(window.a); //123
console.log(window.fn); //fn
</script>
特殊情况1：不要定义全局变量name。因为赋值数组时，数组会自动转换为字符串。
代码举栗：
<script>
var name = ['章三','李四','王五'];
console.log(name[0]); //输出'张'
</script>
特殊情况2：不要定义全局变量top。因为top是只读的，只能使用，不能重新设置。已经被window使用，并且它代表window本身，
代码举栗：
<script>
var top = 1;
console.log(top); //输出window对象
</script>
2.对话框
window可以省略
1）alert：window.alert();
2）prompt：window.prompt();
3）confirm：window.confirm();
3.定时器
1）window.setTimeout(callback, time);
window可以省略。time单位为毫秒。
作用：延迟执行一段程序，只执行一次（定时炸弹），返回一个数字。
代码举栗：
<script>
setTimeout(function(){
console.log('bumb!');
}, 3000);
</script>
定时器的事件不是百分之百精确的，因为要考虑到代码执行顺序问题：当定时器代码和非定时器代码同时存在时，先执行非定时器代码。非定时器代码执行结束后才会执行定时器，此时与定时器设置的延迟时间无关。
代码举栗：
<script>
setTimeout(function(){
console.log('bumb!');
}, 3000);
while(true) {
}
</script>
延迟时间为0也不例外。
代码举栗：
<script>
setTimeout(function(){
console.log('bumb!');
}, 0);
console.log('a'); //先输出a，再输出bumb!
</script>
定时器返回的是一个数字,定时器的标识。
代码举栗：
<script>
var flag = setTimeout(function(){
alert('bumb1!');
}, 5000); //1。表示第几个定时器。
var flag2 = setTimeout(function(){
alert('bumb2!');
}, 5000); //2
console.log(flag);
console.log(flag2);
</script>
2）清除定时器setTimeout
<body>
<button>清除定时器</button>
<script>
var flag = setTimeout(function(){
alert('bumb1!');
}, 5000);
var btn = document.querySelector('button');
btn.onclick = function() {
clearTimeout(flag);
}
</script>
</body>
3）window.setInterval(callback, time); （常用）
可以重复执行，不清除定时器就会一直执行下去。
细节问题与setTimeout定时器一样。
代码举栗：
<script>
setInterval(function(){
console.log(Math.random());
},1000);
</script>
4）清除定时器setInterval
代码举栗：
<body>
<button>stop</button>
<script>
//调用setInterval时，就会产生一个定时器，并且返回数字标示定时器。
var flag = setInterval(function(){
console.log(Math.random());
},1000);
var btn = document.querySelector('button');
btn.onclick = function() {
clearInterval(flag); //清除定时器
}
</script>
</body>
4.location 操作浏览器地址栏
属性：location.href; 设置或获取地址栏地址
方法：location.reload(); 刷新页面
5.history 操作历史记录
属性：history.length; 获取历史记录的长度
方法：
history.back(); 回退上一个历史记录
history.forward(); 前进下一个历史记录
history.go(数字); 正数，表示前进； 负数，表示回退；
6.navigator 获取浏览器信息
属性：navigator.userAgent; 用来获取浏览器的信息
