Date、Bom、Dom、事件
2023-02-16 18:45:12 13 举报AI智能生成
BOM、DOM、事件
作者其他创作
大纲/内容
事件源
事件类型
事件的处理程序
事件对象
事件的四要素
<button onclick=\"console.log('张三被车撞了！已经躺平了')\">咔嚓</button>
行内绑定
dom对象.事件名称 = 事件处理程序
动态绑定
事件监听
事件的绑定方式
click
contextmenu
mousedown
mouseup
mouseenter和mouseleave
mouseover和mouseout
鼠标事件
keydown
keyup
keypress
键盘事件
oninput
focus
blur
change
submit
表单事件
load
游览器事件
回到顶部案例
scroll
滚动事件
常用事件
document.querySelector('button').onclick = function (e) { console.log('事件被点击了') // 1、IE使用的方式 // console.log(window.event) // 2、w3c 只需要写第一个形参就可以表示事件对象 // console.log(e) // 3、兼容性写法 创建的event变量与全局的window.event变量不冲突 var event = e || window.event; }
获取事件对象
event.key
event.keyCode
按键码
clientX/clientY
offsetX/offsetY
pageX/pageY
拖拽效果案例
获取鼠标坐标
event/widnow.event
事件流
兼容问题
写法
// 行内方式解除绑定 只需要将对应的属性移除即可document.querySelector('button').removeAttribute('onclick')
行内解绑
// 动态绑定解除需要将对应的事件名称属性赋值为nulldocument.querySelector('button').onclick = null
动态绑定解除
事件监听解除
事件解绑
event.stopPropagation()
事件冒泡
利用事件冒泡原理，进行冒泡，再根据event.target找到事件源进行操作
事件委托
event.preventDefault();
a标签的阻止
event.preventDefault()
阻止form标签
默认行为
事件
document.getElementById('id')
document.getElementsByTagName('标签名')
document.getElementsByName('name值')
document.querySelector('选择器规则')
document.getElementByClassName(\"class名)
document.querySelectorAll('选择器规则')
dom对象获取
innerHTML
value
textContent
元素内容操作
调用方法控制
标签上class、布尔属性就使用dom对象调用属性方式完成、其他的一律使用调用方法完成
调用属性控制
元素属性操作
dom对象.style.样式名称
window.getComputedStyle(dom对象)
获取样式
dom对象.style.样式名称= 值
设置样式
元素样式操作
children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
parentNode
获取子元素节点
document.createElement('a')
创建元素节点
document.createAttribute('href')
创建属性节点
nodeValue
设置节点属性值
document.createTextNode('百度一下')
创建文本节点
简单无脑添加
创建节点
appendChild(textNode)
文本节点加入到元素节点中
setAttribute（‘属性节点名’）
属性节点设置到元素节点
添加节点
替换节点
被复制元素的dom对象.cloneNode(布尔值) 布尔值决定是否需要将子元素一起复制
复制节点
removeChild
删除节点
复制删除节点
DOM节点操作
getCoumptStyle
clientWidth/clientHeight
offsetWidth/offsetHeight
获取元素宽高
document.querySelector('.two').offsetParent
offsetLeft/offsetTop
获取定位偏移量
scrollHeight/scrollWidth
scrollTop/scrollLeft
clientHeight/clientWidth
获取滚动宽高
DOM
分支主题
navigator.appVersion
navigator.userAgent
navigator.appName
navigator.cookieEnabled
属性值
navigator对象
location.hash
location.search
location.pathname
location.href
location.hostname
location.port
location.reload()
location.replace()
方法
location对象
history.length
属性
history.go(number|URL)
history.back()
history.forward()
history对象
BOM
Bom、Dom、事件
收藏
0 条评论
回复 删除
下一页
