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