事件三要素
事件源 ，事件类型，事件函数
事件源.addEventListener('事件类型', function (e) {
console.log(e);
})获取事件对象
type
获取当前的事件类型
-
事件类型
document.addEventListener('click',function(e){
console.log(e.type);
})clientX / clientY
获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY
获取光标相对于当前 DOM元素 左上角的位置
key
用户按下的键盘键的
-
获取按键
document.addEventListener('keydown', function (e) {
console.log(e.key);
})trim( )
去除空格 ， 去除左右两边空格
属性名.trim( )this
- 函数里面的 this 是一个特殊的变量 变量的值是一个对象
- 对象是谁 : 那一个对象在调用 该函数 那么 this 关键字就执行的是 这个对象
this
谁调用这个函数 函数里面的 this 关键字 就指向谁
回调函数
将一个函数作为参数传递到另外一个函数 这个函数就称之为回调函数
事件流
-
事件在发生时有一个流动过程
DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
事件捕获
第三个参数为true 从外往里触发
-
先触发爷爷身上的事件 然后在触发爸爸身上的事件 最后触发自己身上的事件
开启事件捕获
-
addEventListener('事件类型',事件的处理函数,布尔值) 第三个参数设置为 true
事件冒泡
第三个参数为 false 从里往外触发
-
先触发自己的事件 然后再触发 爸爸身上的事件 继续触发 爷爷身上的事件
开启事件冒泡
addEventListener('事件类型',事件的处理函数,布尔值) 第三个参数设置为 true
stopPropagation 阻止冒泡
-
事件对象.stopPropagation（）
- 开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。
- e.stopPropagation() 这个方法添加到某事件函数里的末尾
document.querySelector('.father').addEventListener('click', function (e) {
e.stopPropagation()
console.log(2)
}, false)preventDefault 阻止默认行为
-
事件对象.preventDefault（）
<a href="https://www.baidu.com">百度</a>
<script>
const a = document.querySelector(`a`)
a.addEventListener(`click`, function (e) {
e.preventDefault()
})
</script>阻止表单提交默认行为
-
事件对象.preventDefault（）
- 需要给 表单添加 submit 事件
<form action="index.php">
<input type="text"><br>
<input type="submit" value="提交">
</form>
<script>
// 阻止表单的默认行为 一定要给 form标签 注册 submit 事件
// 1. 获取 form 标签
// 2. 给 form 标签 对象 注册 submit 事件
const form = document.querySelector('form')
console.log(form)
form.addEventListener('submit', function (e) {
alert('表单提交了')
e.preventDefault()
})
</script>鼠标经过事件
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果
事件委托
-
利用事件冒泡 将事件注册在 父元素身上 ，当子元素 身上的事件在触发时 ， 将该事件冒泡到 其父元素身上
-
给父元素注册事件 当我们触发子元素的时候 会冒泡到父元素身上 从而触发父元素的事件
祖先元素.addEventListener(‘事件名’, function(e){
if (e.targer.tagName === '标签名') {
}
})事件对象.target.tagName
-
仅仅只想给 父元素 里面 指定的子元素 注册事件 需要使用 事件对象 e.target.tagName
ul.addEventListener(`click`, function (e) {
// console.log(e.target.tagName);
if (e.target.tagName === 'LI') {
console.log(`你好世界`);
}自定义属性
data-自定义属性
-
在标签上一律以 data- 开头
-
在DOM对象上以 dataset . 对象方式获取
<body>
<div data-id="1"> 自定义属性 </div>
<script>
// 1. 获取元素
let div = document.querySelector('div')
// 2. 获取自定义属性值
console.log(div.dataset.id)
</script>
</body>scroll 滚动事件
-
当用户滚动到指定位置或元素时会触发scroll事件
scroll事件适应于所有可滚动的元素 和 window对象
window.addEventListener(`scroll`, function () {
console.log(1);
})window对象 或 document对象 注册scroll 事件 只要滚动条 滚动了 就触发
window指整个页面
页面滚动
document.documentElement
表示获取 html 标签
scrollLeft
获取 向页面右边滚动 离页面左边距离
scrollTop
获取 向页面下边滚动 离页面上边距离
window.addEventListener('scroll', function () {
console.log(document.documentElement.scrollTop);
})获取盒子位置
offsetTop
-
如果他的父元素没有定位 得到盒子离页面 左边的距离
-
如果他的父元素有定位 得到盒子离父元素 左边的的距离
offsetLeft
-
如果他的父元素没有定位 得到盒子离页面 顶部的距离
-
如果他的父元素有定位 得到盒子离父元素 顶部的的距离
4509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
