JS 进阶 (六) 浏览器事件模型DOM操作(2)

简介: JS 事件事件是元素(或者浏览器)天生自带的行为,只要行为处罚,就会触发相关的事件xxx.onclick = function(){} 属于事件绑定,给这个事件行为绑定方法,行为触发的时候事件参考文档

JS 事件

事件是元素(或者浏览器)天生自带的行为,只要行为处罚,就会触发相关的事件

xxx.onclick = function(){} 属于事件绑定,给这个事件行为绑定方法,行为触发的时候

事件参考文档

【事件】

  • 鼠标事件
  • click 点击
  • dbclick 双击
  • mousedown/mouseup/mousemove
  • mouseover/mouseout
  • mouseenter/mouseleave
  • wheel 滚轮
  • 表单事件
  • focus/blur 获取、失去焦点
  • change 内容改变
  • 键盘事件
  • keyup/keydown
  • keyepress
  • 手势事件
  • touchstart/touchend/toucemove 单指
  • gesture 多指事件
  • 拖放事件
  • dragstart / drag / dragend
  • dragenter 进入投放区
  • dragover/dragover
  • drop 释放
  • 媒体事件
  • 值变化事件
  • hashchanghe 浏览器地址栏 hash 变化触发事件
  • input 表单正在输入内容。。。
  • 其他事件
  • offline/online 断网或者连网
  • animationstart/iteration CSS3Animation 动画事件
  • transitionstart/end。run CSSTranslation 动画事件
  • fullscreenchange 全凭切换事件
  • resize 窗口大小改变
  • scroll 滚动条滚动
  • load 加载完
  • error 加载失败
  • timeout 加载超时
  • progress 加载中

【事件绑定】

  • 1、DOM0 级事件绑定
    元素.onxxx = function(){...}
  • 2、DOM2 级事件绑定
    在 EventTarget.prototype 添加了 addEventListener/removeEventLister/dispatchEvent
    非标准浏览器(IE<=8)没有这个东西,只有 attachEvent/datachevent(里面 this 不是当前元素)
    xxx.addEventListener('xxx',function(){...})

【DOM 事件绑定原理】

每一个 DOM 元素对象内都有很多内置属性,其中包含 onxxx 这样的事件类型的私有属性

DOM0事件绑定原理就是给这些事件类私有属性赋值

特点: 如果不存在不绑定,只能绑定一个方法

DOM2 事件绑定

box.addEventListener('click',function(){})

DOM2 事件可以绑定多个,他是通过浏览器事件池机制来做的

问: window.onload 和 document.ready 区别($(document).ready())?

答: jq 中的 document.ready 的原理是使用了 DOM2 级事件绑定,通过

window.addEventlistener("DOMContentLoad", ()=>{...}) 可以在一个页面中执行多次这个方法,而且它是 DOM 加载完后执行

window.onload 是基于 DOM0 级事件绑定,只能在页面初始的时候执行一次,而且需要所有资源加载完后才执行,所以 window.addEventlistener("DOMContentLoad", ()=>{...})比 window.onload 执行的更快

事件对象和事件传播机制

  • 事件对象
    当事件触发、浏览器会把制定的方法执行,并且把全局下记录的当前操作信息的'事件对象'传递给这个函数 ,不管在哪个函数中,获取到的是同一个对象,存储的是当前操作的信息,和函数没关系
let n;
document.bofy.onclick = function (ev) {
  console.log("Body");
  console.log(ev === n);
};
box.onclick = function (ev) {
  console.log("Box");
  console.log(ev);
};

事件对象

  • 【鼠标事件对象】MouseEvent
    clientX/clientY: 鼠标触发点距离当前窗口左上角x/y坐标
    pageX/pageY:鼠标触发点距离当前页面Body的左上角x/y坐标
    path:[...]: 存储的是冒泡阶段传播的路径,(值是捕获阶段获得的)
    srcElement/target: 事件源,当前操作的元素,在哪触发的
    type: 事件类型
  • 【键盘事件对象】KeyboardEvent
    which/keyCode 键盘码
    altKey/shiftKey/ctrlKey 记录是否在按键的时候按了,组合按键,属性是布尔
  • 【常规事件对象】Event
    e.preventDefault()  / e.returnValue  阻止事件默认行为
     ```js
        // 设置点击ctrl+f 刷新
        document.onkeydown = function (ev) {
          console.log(ev);
          ev.preventDefault() || ev.returnValue;
          let { ctrlKey, keyCode } = ev;
          if (ctrlKey && keyCode === 70) {
            window.location.reload();
          }
        };
        // 禁止右键打开菜单
        document.oncontextmenu = function (ev) {
            ev.preventDefault()
            // return false
        };
     ```
  • e.stopPropagation() / e.cancelBubble 阻止事件的冒泡
// 事件具备传播机制
+ 捕获阶段 CAPTURING_PHASE: 1
+ 目标  AT_TARGET: 2
+ 冒泡  BUBBLING_PHASE
1、当我们触发当前元素的事件行为的时候,首先从最外层window开始,一层层的按照结构向里层查找 —— 捕获阶段(目的是为冒泡提供传播路径)
2、找到当前的事件源,触发当前的相关行为 —— 目标阶段
3、不仅当前事件源的相关行为被触发,其所有祖先元素的相关事件行为都会被触发,(由里向外) —— 冒泡阶段
⚠️注意:DOM0级事件中只有冒泡事件,DOM2级事件中xxx.addEventListener('click',function(){}, false) , 第三个参数是可以控制在冒泡还是捕获阶段触发,默认false,冒泡,改成true为捕获阶段,但是很少用
⚠️:大部分时间默认就存在冒泡机制,但是少部分事件天生就自己阻止了冒泡传播
  mouseenter/mouseleave // 进入离开 默认阻止了冒泡传播
  mouseover/mouseout  // 悬浮 没有阻止冒泡 很恶心 最好不用 或者阻止冒泡事件
  • 【手指事件对象】TouchEvent
  • ...
  • 事件对象中常用的属性
  • target & srcEvent
  • type
  • code & key
  • keyCode & which
  • which/keyCode
  • clientY/clientX
  • pageX/pageY
  • preventDefault
  • stopPropagation

相关文章
|
9天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM,但存在差异,如处理XML中节点间的空白和换行。IE不将这些视为文本节点,而其他浏览器则会。示例显示,一个包含CR/LF和空格的XML文件在IE中解析有4个子节点,而在其他浏览器中有9个。`loadXMLDoc()`加载XML后,`documentElement.childNodes.length`的值因浏览器而异。
|
2天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM,但处理XML空白和换行存在差异。IE不将空格或换行视为文本节点,而其他浏览器则会。例如,一个包含CR/LF和空格的XML文档,在IE中根元素有4个子节点,其他浏览器则有9个。`document.write`显示了不同浏览器解析后的子节点数。
|
7天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器均支持W3C DOM,但处理XML中空白和换行存在差异。IE不将这些视为文本节点,而其他浏览器则会。例如,含换行和空格的XML节点在IE中显示4个子节点,其他浏览器显示9个。`document.write`展示此差异。
|
10天前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
8 1
|
10天前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
5天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
现代浏览器虽遵循W3C DOM规范,但在处理XML空白和换行时存在差异。例如,IE不将空格或换行视为文本节点,而其他浏览器则会。这影响DOM中子节点计数,如示例所示,加载XML后,IE会显示4个子节点,而其他浏览器可能显示9个,因为它们包含了空白和换行。
|
8天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
11 0
|
9天前
|
JavaScript 容器
js【详解】事件
js【详解】事件
15 0
|
9天前
|
缓存 JavaScript API
js【详解】DOM
js【详解】DOM
9 0
|
9天前
|
JavaScript
js【详解】event loop(事件循环/事件轮询)
js【详解】event loop(事件循环/事件轮询)
13 0