Web API 笔记05
注册事件的其他方式
.addEventListener（）
参数：1、事件名 2、事件处理函数 3、触发阶段(暂时用false，文章后部分详解)
box.addEventListener('click / mouseover...' , function(){} , false);优点：
可以给一个事件注册多个Listener，实现事件的扩充等
可以精确控制事件的触发
缺点：
给<a>标签注册点击事件时无法通过 return false 阻止默认事件，解决办法为：在处理函数中添加一个形参接收事件处理对象
box.addEventListener('click / mouseover...' , function(eventObj){
eventObj.preventDefault();
} , false)(ie8以下： .attachEvent(‘onclick’ , function(){});)
移除事件：
box.onclick = null;
box.removeEventListener('click' , function(){} , false);
如果要给addEventListener注册的事件移除的话，注册的时候不能传入匿名函数。
(ie8以下： .detachEvent(‘onclick’ , function(){});)
事件处理对象属性
事件处理对象中：（需要在事件处理函数中接收事件对象）
- .clientX 鼠标点击时在浏览器’可视区’的X坐标
- .clientY 鼠标点击时在浏览器’可视区’的Y坐标
document.onclick = function(eventObj){
console.log(eventOBj.clientX);
}- .pageX :鼠标点击时在’页面’的X坐标
.pageY :鼠标点击时在’页面’的Y坐标
.target ：点击谁就是谁
.type ：事件名
事件源.onkeyDown注册键盘敲击事件（onkeyUp/onkeyPress）
- onkeyPress可以区分大小写
- .keyCode 监听用户按下的是哪个键，返回数字，最常用，没有兼容问题
.key 返回字符
.preventDefault() 取消默认事件。
- .stopPropagation(); 阻止事件传播。
给可视区注册事件一般注册给document，制作鼠标跟随需要在函数中接收事件对象。
事件流
点击谁谁就是事件目标，从document一直到事件目标，即事件流
各级注册了相同的事件则分为：
- 捕获阶段（Capture Phase）从最外面一直进到’事件目标的父级’
- 目标阶段（Target Phase）找到事件目标,执行其事件函数
- 冒泡阶段（Bubbling Phase）从事件目标事件返回最外面，边往外走边执行各级的事件
不同的事件类型不会混在一起,如鼠标移入和鼠标点击不会混在一起
无论事件目标有没有注册事件，均会产生事件流
.addEventListener(); 和 .removeEventListener();第三个参数设置为 true 可以实现在捕获阶段依次执行事件函数。
通过事件对象.target 可以找到事件目标
事件委托
将事件目标的事件注册给父级元素，委托给父级元素执行
ul.onclick = function(eventObj){
//通过事件对象.target 可以找到事件目标
console.log(eventObj.target.innerText);
}可以应用在 加载更多 等方面
处理事件处理对象的兼容性问题
事件对象兼容语句
eventObj = eventObj || event;target -> srcElement
小拓展：
浏览器对象模型
把整个浏览器看为一个 window 对象
- load 事件：页面所有内容加载完成的时候触发
window.onload = function{
}- unload 事件：页面关闭时触发,可以用于清除缓存
window.onunload = function(){
}- URL ：统一资源定位符（Uniform Resource Locator）
- scheme ： http: 通信协议
- host ： www.xiaoxiaopeng.com 主机（找计算机）
- port ： 80 端口号（找软件）http默认是80
- path ： ../index.html 路径
- query ： 查询字符串
fragment ：锚点
location 地址栏， 成员
- href : 整个地址的字符串
- search : 查询字符串
location.reload();刷新,如果传参数true，则为强制刷新