获取元素
语法
const 对象 = document.querySelector(`标签/类/id选择器`)
示例代码
const btn = doc.qs(`tubbon`)
操作元素属性
语法
dom对象.innerText/Html=`新值`//innerHTML 将文本内容添加/更新到任意标签位置,基本用HTMl
dom对象.属性=`值 `
dom对象.style.样式=`新值`//css 属性的 - 连接符与 JavaScript 的 减运算符 冲突，所以要改成驼峰法
dom对象.className/classlist.(add/remore/taggle)(`类名`)
示例代码
img.src=`./sdsfsdfsdf01`
div.style.bgColor=`pink`
box.classlist.add(`actove`)
操作表单属性
语法
获取dom对象.属性名
dom对象.属性名=新值
示例代码
表单.value=`文字`
表单.type=`password`
表单:checked
自定义属性
语法
data-类名 = `值` 开头
dataset.类名 调用
示例代码
<div data-id=`111` data-color=`pink`>
log(dataset.id)//111
log(dataset.color)//pink
事件监听
语法
dom对象.addE...S...(`事件类型`,要执行的函数)
示例代码
const btn =doc.q...s...(`click`,fun..(){
log(等待事件)
})
事件类型
鼠标事件
click:鼠标经过
mouseenter:鼠标经过
mouseleave:鼠标离开
mouseover 和 mouseout 会有冒泡效果
焦点事件
focus:获得焦点
blur:失去焦点
键盘事件
keydown:键盘按下
keyup:键盘弹起
文本事件
input:用户输入
input.value
input:checked
事件对象
语法
dom对象.addE...s..(`事件类型`, 要执行的函数)
事件对象常用属性
获取对象类型就是:type
获取光标相对于浏览器可见窗口左上角的位置:clientX/clientY
获取光标相对于当前DOM元素左上角的位置:offsetX/offsetY
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {//e就是指的dom对象
// console.log(11)
// console.log(e.keyCode)
console.log(e.key)
if (e.key === 'Enter') {
console.log('我按下了回车键')
}
环境对象
this 这个指定就是调用函数的那个变量,this指定don对象
如:dom对象.addE..s(事件类型,fun..(){
this===dom对象
})
*输调用我,我就指向谁
事件流
事件流是事件流动的路径.相同的事件才会有事件流.
事件冒泡
当一个元素触发事件后,会依次向上调用所有父级元素的 同名事件(冒泡事件默认是存在的;false)
从内向外传播
阻止事件冒泡
指阻断事件的流动,保证事件只在元素被执行,而不再去影响到其他对应的 祖先 元素
语法
事件对象.stopP...()
示例代码
son.addEventListener('click', function (e) {
alert('我是儿子')
// 组织流动传播 事件对象.stopPropagation() 点击son元素.
e.stopPropagation()
})
阻止默认行为
某些情况下需要阻断默认行为发生,比如阻止 链接的跳转/表单域的跳转
语法
dom对象.prevenDefault()
示例代码
<form action="http://www.itcast.cn">
<input type="submit" value="免费注册">
</form>
<a href="http://www.baidu.com">百度一下</a>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
// 阻止默认行为 提交
e.preventDefault()
})
const a = document.querySelector('a')
a.addEventListener('click', function (e) {
e.preventDefault()
})
事件委托
原理是用冒泡的特点:给父元素注册事件,子元素触发的时候,会冒泡到父元素身上,从而触发父元素的事件
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<!--<p>我变态</p>-->
</ul>
<script>
/* 点击每个小li 当前li 文字变为粉色 */
// 按照事件委托的方式 委托给父级 事件写到父级身上.
/* 1 获取元素 */
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
console.log('111')
// this指向的是ul
// 事件委托给了父亲
// this.style.color = 'red'
// 点击谁 谁才会变色
//console.dir(e)
//console.dir(e.target) // 就是我们点击的那个对象
// e.target.style.color = 'red'
// 我的需求，我们只要点击li才会有效果
// 测试的时候需要添加一个其它的标签
console.dir(e.target) // tagName: "LI"来判断
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
</script>
\
