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,则为强制刷新