事件流和页面滚动事件
Published on 2022-11-18 13:37 in 分类: WEB api with 帅气丶汪星人
分类: WEB api

事件流和页面滚动事件

事件委托，优化代码

事件流向，是事件完整执行过程中的流动路径。

捕获阶段：是从最大的阶段一层一层往小的地方找。判断是否是捕获阶段，看第三个参数是否是true，是的话就是捕获阶段

冒泡排序：是从小到大一层一层往外找。

阻止冒泡，使用事件对象，语法：e.stopPropagation()

复制代码
    // // 捕获阶段
    // const father = document.querySelector(`.father`)
    // father.addEventListener(`click`,function () {
    //     alert(`我是父亲`)
    // },true)
    // const son = document.querySelector(`.son`)
    // son.addEventListener(`click`,function () {
    //     alert(`我是儿子`)
    // },true)
    // document.addEventListener(`click`,function () {
    //     alert(`我是爷爷`)
    // },true)
    // 冒泡是从最小往大，也就是从小往大
    // const father = document.querySelector(`.father`)
    // father.addEventListener(`click`,function () {
    //     alert(`我是父亲`)
    // })//这里第三个参数可以不写false
    // const son = document.querySelector(`.son`)
    // son.addEventListener(`click`,function () {
    //     alert(`我是儿子`)
    // })//这里第三个参数可以不写false
    // document.addEventListener(`click`,function () {
    //     alert(`我是爷爷`)
    // })//这里第三个参数可以不写false

    // 阻止冒泡排序，使用事件对象
    const father = document.querySelector(`.father`)
    father.addEventListener(`click`,function (e) {
        alert(`我是父亲`)
        e.stopPropagation()
    })//这里第三个参数可以不写false
    const son = document.querySelector(`.son`)
    son.addEventListener(`click`,function (e) {
        alert(`我是儿子`)
        e.stopPropagation()
    })//这里第三个参数可以不写false
    document.addEventListener(`click`,function () {
        alert(`我是爷爷`)
        // e.stopPropagation()
    })//这里第三个参数可以不写false
复制代码

阻止默认转跳行为

复制代码
<form action="https://www.baidu.com/">
    <input type="submit" value="免费注册">
</form>
<a href="https://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()
    })
</script>
复制代码

解绑事件（让点击事件，每次只点击一次）

复制代码
<center>
    解绑时间 <br>
    点击事件，只点击一次 <br>
</center>
<button>点击</button>
<script>
    const btn = document.querySelector(`button`)
    // btn.onclick = function () {
    //     alert(`点秋香`)
    //     解绑事件
        // btn.onclick = null  //原生古老版本
    // }
    // btn.onclick = null//只有写在外边才可以一次都不弹出，因为函数事件已经开始执行了，放在外边是覆盖上边的代码

    // btn.addEventListener(`click`,function fn() {
    //     alert(`点秋香`)
    //     btn.removeEventListener(`click`,fn)  //使用这个要加上函数名称
    // })
    function fn() {
        alert(`点秋香`)
        btn.removeEventListener(`click`,fn)  //使用这个要加上函数名称
    }
    btn.addEventListener(`click`,fn)
</script>
复制代码

事件委托

复制代码
<center>
    事件委托，只能委托父级 <br>
    优点：减少注册次数，提高了程序性能 <br>
    原理：事件委托其实是利用事件冒泡的特点 <br>
    给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件 <br>
    事件：事件对象.target.tagName 可以获得真正触发事件的元素 <br>
</center>
<ul>
    <li>111111111111</li>
    <li>222222222222</li>
    <li>333333333333</li>
    <li>444444444444</li>
    <li>555555555555</li>
</ul>
<script>
let lis = document.querySelectorAll(`ul li`)
// console.log(lis)
// for (let i = 0; i < lis.length; i++) {
//     lis[i].addEventListener(`click`,function () {
//         this.style.color = `red`
//     })
// }
// 按照事件委托的方法 委托父级，事件写到父级身上
const ul = document.querySelector(`ul`)
ul.addEventListener(`click`,function (e) {
    // console.log(1)
    // console.log(e) //事件对象
    console.log(e.target)  //点击的这个对象的元素
    console.dir(e.target)  //展开元素对象的属性和方法
    console.log(e.target.tagName)  //点击的这个元素对象标签名称 UL LI A P 注意这里反馈的是大写
    // e.target.style.color = `red`
    if (e.target.tagName === `LI`) {
        e.target.style.color = `red`
    }
})
</script>
复制代码

样式添加位置事件

复制代码
<center>
    页面加载事件 <br>
    load事件，等所有的元素执行完毕，再加载js元素 <br>
    使用方法，给win绑定load事件 <br>
    页面加载时间 <br>
    DOMContentLoaded <br>
</center>

<script>
    // window.addEventListener(`load`,function () {
    //     const btn = document.querySelector(`button`)
    //     btn.addEventListener(`click`,function () {
    //         console.log(`haha`)
    //     })
    // })
    document.addEventListener(`DOMContentLoaded`,function () { //如果使用DOMContentLoaded的话，声明一定要拉到里边
        const btn = document.querySelector(`button`)
        btn.addEventListener(`click`,function () {
            console.log(`haha`)
        })
    })
</script>
<button>点击</button>
复制代码

滚动事件

复制代码
<center>
    页面滚动事件 <br>
    事件名：scroll <br>
    监听整个页面滚动 <br>
    scrollLeft和scrollTop（属性） <br>
    获取被卷去的大小 <br>
    获取元素内容往左，往上滚出去，看不到的距离 <br>
    这两个值是可读写的 <br>
    尽量在scroll事件里面获取被卷去的距离 <br>
</center>
<div>
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
</div>
<script>
    // 滚动立马触发
    // window.addEventListener(`scroll`,function () {
        //执行操作
        // console.log(`滚动事件`)
    // })
    const html = document.querySelector(`html`)
    const div = document.querySelector(`div`)
    console.log(html)
    // 设置  html.scrollTop = `100`
    window.addEventListener(`scroll`,function () {
        // console.log(`滚动事件`)
        // console.log(html.scrollTop)//页面被卷取的头部
        if(html.scrollTop >= 200) {
            div.style.opacity = `1`
        } else {
            div.style.opacity = `0`
        }
    })
    //先获取html
    //const html = document.documentElement
    //console.log(html)
    //document.documentElement.scrollTop = 0
</script>
复制代码

获取元素的位置尺寸

复制代码
    <style>
        div {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-top: 50px;
        }
    </style>
</head>

<body>
<div>
    <p></p>
</div>
<script>
    const p = document.querySelector(`p`)
    //offsetTop获取的是距离最近的上一级父级有定位元素的距离，如果父级没有定位，将参考body的距离
    console.log(p.offsetTop)
</script>
复制代码

 

posted @   帅气丶汪星人  阅读(90)  评论(0)  编辑  收藏  举报
相关博文：
· 绑定事件和环境对象和回调函数
· provide和使用computed跨组件传值 && EventBus【订阅模式】传值 && nextTick原理 && keep-alive原理
· 【博学谷学习记录】超强总结，用心分享 | 前端开发 web APIs(三)
· JS-事件流
· 【面试题】对JS中的事件冒泡、事件捕获、事件委托的理解
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
← → ↓ ↑
点击右上角即可分享
微信分享提示
AI IDE Trae