导图社区 DOM事件
这是一篇关于DOM事件的思维导图,包括:注册事件、节点、获取元素、键盘事件、鼠标事件。
编辑于2022-08-07 17:47:04 河南DOM
注册事件
概述
document:文档对象,是整个html里面所有标签的集合对象
事件三要素:事件是有三部分组成 1.事件源 2.事件类型 3.事件处理程序
由页面的标签形成的一个树形的结构,这个结构就是DOM树,可以通过DOM对页面标签进行添加内容,绑定事件、
给元素添加事件,称为注册事件或者绑定事件
注册事件有两种方式:传统方式和方法监听注册方式
---------------------------------------------------------------------------------------
传统注册方式
利用on开头的事件onclick
特点:注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数
方法监听注册方式
addEventListener()方法
特点:同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行
删除事件
传统注册方式:onclick=null
方法监听注册方式:removeEventListener("click",fff)
DOM事件流
---------------------------------------------------------------------------------------
事件流描述的是从页面中接收事件的顺序,事件发生时会在元素节点按照特定的顺序传播,这个传播过程即DOM事件流。
DOM2的事件过程:捕获---目标---冒泡
捕获过程:widonw-->document-->html-->body-->父元素-->具体子元素(从外到内)
冒泡过程:具体子元素 父元素 body html document widonw(从内到外)
注意
JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick只能得到冒泡阶段
true是捕获阶段,false是冒泡阶段
有些事件是没有冒泡的,比如:onblur、onfocus、onmouseenter、onmouseleave
阻止事件冒泡
---------------------------------------------------------------------------------------
事件冒泡:先触发自己绑定的事件,再去触发父元素的事件,一次向上传递,直到document 为止,从最具体的元素到最不具体元素。
e.stopPropagation()
e.cancelBubble = true
事件对象
---------------------------------------------------------------------------------------
event就是事件对象:onclick=function(event){}
event是形参,系统帮我们设定为事件对象,不需要传递实参过去。
官方解释:event对象代表事件的状态,比如键盘案件的状态、鼠标的位置、鼠标按钮的状态。
简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。
属性和方法
---------------------------------------------------------------------------------------
e.target(返回触发事件对象)
e.type(返回事件的类型 比如click、mouseover)
e.preventDefault()(阻止默认事件行为 比如不让链接跳转)
e.target和this的区别:e.target返回触发事件对象(元素),this返回的是绑定事件对象(元素)
事件委托(代理)
---------------------------------------------------------------------------------------
事件委托也称为事件代理,在jQuery里面称为事件委派
原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
代理本质:也是根据事件冒泡,把子元素事件传递给父元素
事件委托:就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
节点
节点概述:每种节点都有以下几种属性 节点名称(nodeName) 节点值(nodeValue) 节点类型枚举值(nodeType)
节点类型:文本节点 元素节点 属性节点 注释节点等
节点概述
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3(文本节点包含文字、空格、换行等)
属性节点
元素节点
nodeName(标签名)
nodeType(1)
nodeValue(null)
文本节点
nodeName(#text)
nodeType(3)
nodeValue(文本内容本身)
获取节点
---------------------------------------------------------------------------------------
父节点:子级.parentNode(返回最近的一个父节点,没有父节点则返回null)
父节点:node.parentElement
子节点:父级.children(只读属性,返回所有的子元素节点,其余节点不返回)
上一个兄弟元素:node.previousElementSibling
下一个兄弟元素:node.nextElementSibling
增删改查
---------------------------------------------------------------------------------------
创建节点:document.createElement('标签名')动态创建元素节点
添加节点:父级.appendChild(child)将一个节点添加到指定父节点的子节点列表末尾
插入节点:父级.insertBefore(要插入,插入谁)插入到谁谁之前
删除节点:父级.removerChild(要删除的元素)从父级中删除某个元素
复制节点:父级.cloneNode()如果括号参数为空或者false,则是浅拷贝,即只克隆复制节点本身,如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有子节点
属性操作
---------------------------------------------------------------------------------------
获取属性值:element.getAtteribute("属性")
设置属性值:element.setAtteribute("属性","值")设置属性值
移除属性:element.removerAttribute("属性")
添加类:element.classList.add('属性')
移出类:element.classLIst.remove('属性')
切换类:element.classLIst.toggle('属性')
H5获取自定义属性:element.dataset.index或者element.dataset[ 'index' ]
自定义属性:目的是为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中(H5规定自定义属性data-开头作为属性名并且赋值)
修改属性
---------------------------------------------------------------------------------------
修改元素属性:src、href、title
修改普通元素内容:innerHTML、innerText、textContent.trim(去头去尾空格)
修改表单元素:value、type、disabled、checked、selected
修改元素样式:style、className
获取元素
根据id获取标签对象 getElementById()
通过类名获取元素 getElementsByClassName()
通过div标签名进行获取 getElementsByTagName()
通过name属性进行获取 getElementsByName()
根据指定选择器返回第一个元素对象 querySelector()
返回指定选择器的所有元素对象集合 querySelectorAll()
获取body元素 document.body
获取html元素 document.documentElement
键盘事件
onkeyup:某个键盘按键被松开时触发
onkeydown:某个键盘按键被按下时触发
onkeypress:某个键盘按键被按下时触发(不识别功能键 比如ctrl、shift、左右箭头)
注意:如果使用addEventListener不需要加on
执行顺序:keydown-->keypress-->keyup
注意:onkeydown和onkeyup不区分字母大小写,onkeypress区分
keyCode:返回该键的ASCLL值。不区分大小写。
key:返回结果是字符串,按下字符键时,返回结果是键对应的文本字符,按下功能键时,返回结果是键的名称或空串,可以区分字母的大小写。
修改键属性
shift---->shiftkey
ctrl---->ctrlkey
alt---->altkey
windows---->metakey
属性值是布尔类型,被按下时属性为 true 或 false。
鼠标事件
onclick:鼠标点击左键触发
onmouseover:鼠标经过触发
onmouseenter:鼠标进入(进入到里面)
onmouseout:鼠标离开触发
onmouseleave:鼠标离开
onfocus:获得鼠标焦点触发
onblur:失去鼠标焦点触发
onmousemove:鼠标移动触发
onmouseup:鼠标弹起触发
onmousedown:鼠标按下触发
onscroll:滚动事件
contextmenu:禁止鼠标右键菜单
selectstart:禁止鼠标选中
e.clientX:返回鼠标相对于浏览器窗口可视区的X
e.clientY:返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX:返回鼠标相对于文档页面的X坐标
e.pageY:返回鼠标相对于文档页面的Y坐标
e.screenX:返回鼠标相对于电脑屏幕的X坐标
e.screenY:返回鼠标相对于电脑屏幕的Y坐标
mousemove:鼠标移动事件,每次鼠标移动都会获得最新的鼠标坐标