Web API第六、七天学习总结

微风抚少年
104 阅读3分钟

Web API第六、七天学习总结

const和let的区别

早些时候js声明变量只能使用var

es6（新版本的js）出现以后 只能使用let 和const

  1. let声明的变量可以被修改
  2. const声明的变量不可以被修改 const常量 固定改变

const作用

在程序设计的时候，如果发现一些数据永远不会被更改

优先使用const(后期不小心被修改了-->报错，去解决错误)

1649770994743.png

事件对象

原理

也是一个对象，这个对象里面有事件触发时的相关信息

比如：鼠标点击事件，事件对象里面就包含了鼠标点击时的位置信息

一般命名为：event、ev、e

1649772916656.png

事件对象常用属性

部分常用属性

  1. type
    1. 获取当前的事件类型
  2. clientX/clientY
    1. 获取光标相对于浏览器可见窗口左上角的位置
  3. offsetX/offsetY
    1. 获取光标相对于当前DOM元素左上角的位置
  4. key
    1. 用户按下的键盘的值
    2. 现在不提倡用keyCode

事件流动

事件完整执行过程中的流动路径

  1. 捕获阶段
    1. 从父元素到子元素
  2. 冒泡阶段
    1. 从子元素到父元素

事件捕获

从父元素到子元素去执行对应的事件

代码

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

  • addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)
  • 默认是false代表冒泡阶段
  • 若是使用L0事件监听只有冒泡阶段，没有捕获
    <div class="a">爷爷
        <div class="b">爸爸
            <div class="c">儿子</div>
        </div>
    </div>

    <script>
        const a = document.querySelector(".a");
        const b = document.querySelector(".b");
        const c = document.querySelector(".c");

        a.addEventListener("click",function() {
            console.log('a');
        });
        b.addEventListener("click",function() {
            console.log('b');
        },true);//可以更改为捕获阶段  改为true
        c.addEventListener("click",function() {
            console.log('c');
        },false);//冒泡阶段 默认值是false

    
    </script>

事件冒泡

当一个元素的事件被触发时，同样的事件将会在改元素的所有祖先元素依次被触发。

冒泡事件是JS默认的。

阻止冒泡事件

  1. 冒泡事件是默认的，容易导致事件影响到父级元素
  2. 要把事件限制在当前元素内，阻止事件流动
  3. 不止冒泡阶段有用，捕获阶段也有效

语法

事件对象.stopPropagation()

c.addEventListener("click",function(event) {
            // 阻止事件冒泡
            event.stopPropagation();
        });

鼠标经过事件

  • mouseover 和 mouseout 会有冒泡效果
  • mouseenter 和 mouseleave 没有冒泡效果(推荐)

阻止标签的默认行为

阻止默认行为，如点击链接不跳转，表单域的不提交

语法

事件对象.preventDefault()

<a href="https://www.baidu.com/">百度</a>
<script>
        const a =document.querySelector("a");
		 a.addEventListener("click",function(event) {
            console.log("a标签点击了");
            //阻止标签的默认样式
            event.preventDefault();
        });
</script>

事件委托

优点

给父元素添加事件(提高性能)

原理

利用事件冒泡的特点，给父元素添加事件，子元素可以触发

实现

事件对象.target可以获得真正触发事件的元素

事件对象.target.nodeName可以获得真正触发事件的元素的标签名(大写)

a26fe89213c9a970895253a1a894a5e224af60f0.png

滚动事件

很多网页需要检测用户把页面内容滚动到一定区域后做一些处理，比如固定导航栏、返回顶部

语法

元素.addEventListener('srcoll',function(){})

        //页面滚动事件
        window.addEventListener("scroll",function() {
            //执行的操作
        })

  • 监听整个页面给window或者document加

  • 获取当前页面滚动距离的代码document.documentElement.scrollTop

        // 页面级别的滚动
        window.addEventListener("scroll",function() {
            //获取当前页面滚动距离的代码document.documentElement.scrollTop
            console.log(document.documentElement.scrollTop);
        })

标签的自定义属性

自定义函数 data(固定写法)-index(自己取的名字)

示例

<a data-index="${index}" href="javascript:" class="del">删除</a>
const index = event.target.dataset.index;//使用语法
avatar
文章
阅读
粉丝