前端学习小白打卡12

最新推荐文章于 2024-08-14 12:45:22 发布

白潏

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量29

点赞数

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_65719034/article/details/132336162

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

事件流
捕获冒泡
事件流是指事件完整执行过程中的流动路径
事件捕获概念
从DOM的根元素开始去执行对应的事件
DOM.addEventListener（事件类型，事件处理函数，是否使用捕获机制）
.addEventListener第三个参数传入true代表捕获阶段触发（很少使用）一层一层流动
若传入false代表冒泡阶段触发，默认false
若是用L0事件监听，则只有冒泡阶段，没有捕获 L0是原始注册事件，L2是.addEventListener

事件冒泡概念
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发，从下往上冒泡，依次向上调用所有父级元素的同名事件

阻止冒泡
因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，把事件就限制在当前元素内
语法：事件对象.stopPropagation()
e.stopPropagation()
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

解绑事件
L0
on事件方式，直接使用null覆盖就可以实现事件的解绑
btn.οnclick=funtion(){

}
解绑
btn.οnclick=null

只能运行一次
btn.οnclick=funtion(){
btn.οnclick=null
}

L2
function fn(){

}
checkall.addEventListener('click',fn)

checkall.removeEventListener('click',fn)
匿名函数无法被解绑

removeEventListener（事件类型，事件处理函数，[获取捕获或者冒泡阶段]）
鼠标经过事件的区别
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果（推荐）

注册事件
传统on注册L0
同一个对象，后面注册的事件会覆盖前面注册
直接使用null覆盖就可以解绑
都是冒泡阶段执行
事件监听L2
后面注册的事件不会覆盖前面注册的事件
可以调参确实冒泡还是捕获阶段执行
必须用removeEventListener（）
匿名函数无法被解绑

事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，提高程序性能
原理：事件委托其实是利用事件冒泡的特点
给父元素注册事件，当触发子元素时，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName可以获得真正触发事件的元素
<ul>
<li>第1飞</li>
<li>第2飞</li>
<li>第3飞</li>
<li>第4飞</li>
<li>第5飞</li>
</ul>
const ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
e.target.style.color='red'
})

阻止冒泡

阻止默认行为
<a href="">dian</a>
e.stopPropagation()
const a=document.querySelector('a')
a.addEventListener('click',function(e){
e.preventDefault()
})

页面加载事件
1
加载外部资源（如图片，外联css和js）加载完毕时触发的事件
场景：有时要等页面资源全部处理完了做一些事情
老代码js在head中，直接找dom找不到
事件名：load
监听页面所有资源加载完毕
window指整个页面
window.addEventListener('load',function(){})

也可以单个资源加载load事件

2
当初始的HTMlL文档被完全加载和解析完成之后，DOMContentLoaded事件会被触发，而无需等待样式表，图像等完全加载
document.addEventListener('DOMContentLoaded',function(){})

页面滚动事件
滚动条在滚动的时候持续触发
事件名：scroll
监听整个页面滚动
window或document加都行
window.addEventListener('scroll',function(){
console.log('klkl')
})

scrollLeft和 scrollTop
获取被卷去的大小
获取元素内容从左，往上滚出去看不到的距离
这两个值是可读写的
const a=document.querySelector('div')
a.scrollTop

滚动显示或隐藏
window.addEventListener('scroll',function(){
const n =document.documentElement.scrollTop
if(n>100)
{
div.style.display='block'
}
else{
div.style.display='none'
}
})

document.documentElement HTML文档返回对象为HTML元素

const n =document.documentElement.scrollTop是数字型不带单位
可以默认，可读写document.documentElement.scrollTop
document.documentElement.scrollTop=800

scrollTo()方法可以把内容滚动到指定的坐标
语法：
元素.scrollTo()
window.scrollTo(0,1000)

页面尺寸事件
会在窗口尺寸改变的时候触发

window.addEventListener('resize',function(){
console.log(1)
})

获取宽高
获取元素的可见部分宽高（不包含变宽，margin，滚动条）
clientWidth和clientHeight
const a=document.querySelector('div')
a.clientWidth

元素尺寸位置-尺寸
获取宽高：
获取元素的自身宽高，包含元素自身设置的宽高，padding，border
offsetWidth和offsetHeight
获取出来的是数值
注意：获取的是可视宽高，如果盒子是隐藏的，结果为0

获取位置：
获取元素距离自己定位父级元素的左，上距离
offsetLeft和offsetTop是只读属性

获取元素尺寸于位置-尺寸
获取位置：
element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置//就是移动了视口也会变

scroll-behavior
当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。
scroll-behavior: smooth;
scroll-behavior: auto;
css
//让滚动条丝滑滚动
html{
scroll-behavior: smooth;
}
属性选择器--只选了input 里面有value属性的标签
css
input[value]
{
color:red；
}
<input type="text" value="123">
<input type="password" >
或者
input[type=text]
{
color:red；
}

css

/* table{
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #c0c0c0;
    width: 500px;
    margin: 100px auto;
    text-align: center;
}
th{
    background-color: #09c;
    font:bold 16px "微软雅黑";
    color: #fff;
    height: 24px;    
}
td{
    border: 1px solid #d0d0d0;
    color: #404060;
    padding: 10px;
}
.allCheck{
    width: 80px;
}
.clk:checked{
    width: 30h;
    height: 30px;
}
.all{
    margin-left: 10px;
    
} */

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/my.css">
    <title>Document</title>
</head>
<body>
    <!-- <table>
        <tr>
            <th class="allCheck">
                <input type="checkbox" name="" id="checkAll" class="clk"><span class="all">全选</span>
            </th>
            <th>商品</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" id="" class="ck clk">
            </td>
            <td>小米时间</td>
            <td>设定</td>
            <td>￥3333</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" id="" class="ck clk">
            </td>
            <td>小米时2间</td>
            <td>设定</td>
            <td>￥33343</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="check" id="" class="ck clk">
            </td>
            <td>小米时3间</td>
            <td>设定</td>
            <td>￥33333</td>
        </tr>
    </table> -->
    <!-- <ul>
        <li>第1飞</li>
        <li>第2飞</li>
        <li>第3飞</li>
        <li>第4飞</li>
        <li>第5飞</li>
        <p>dldada</p>
    </ul>
    <a href="">dian</a>   -->
    <script src="./js/my.js">
    </script>
</body>
</html>

// const checkall=document.querySelector('#checkAll')
// const cks=document.querySelectorAll('.ck')
// checkall.addEventListener('click',function(){
    
//     for (let i = 0; i < cks.length; i++)
//     {
//             cks[i].checked=checkall.checked
//     }

// })
// checkall.removeEventListener('click',fn)
// for (let i = 0; i < cks.length; i++) {
//    cks[i].addEventListener('click',function(){
//     checkall.checked=document.querySelectorAll('.ck:checked').length===cks.length
// })
    
// }
const ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
    if(e.target.tagName==='LI')
    e.target.style.color='red'
})
const a=document.querySelector('a')
a.addEventListener('click',function(e){
    e.preventDefault()
})

window.addEventListener('resize',function(){
    console.log(1)
})