web API 笔记 05
注册事件的其他方式
.addEventListener()
参数: 1, 事件名 2, 事件处理函数 3, 触发阶段(暂时用 false, 文章后部分详解)
box.addEventListener('click / mouseover...' , function(){} , false);
优点:
可以给一个事件注册多个 Listener, 实现事件的扩充等
可以精确控制事件的触发
缺点:
给标签注册点击事件时无法通过 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, 则为强制刷新
来源: https://www.2cto.com/kf/201805/746154.html