【JavaScript】事件相关知识详解

已于 2023-01-19 13:38:01 修改
阅读量1.7k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
于 2023-01-19 13:32:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45867247/article/details/128734387
版权

💻 【JavaScript】事件相关知识详解🏠专栏：JavaScript
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

文章目录

【JavaScript】事件概念、绑定、委托、冒泡和阻止默认行为等

一. 概念

事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动等。

我们可以为事件来绑定回调函数来响应事件。绑定事件的方式：

  1. 可以在标签的事件属性中设置相应的JS代码。

    <button onclick="js代码。。。">按钮</button>

  2. 可以通过为对象的指定事件属性设置回调函数的形式来处理事件。

    <button id="btn">按钮</button>	
<script>
    var btn = document.getElementById("btn");
	btn.onclick = function(){		
};
</script>

执行事件的步骤：

  1. 获取事件源
  2. 注册事件（绑定事件）
  3. 添加事件处理程序（采取函数赋值形式）
<div>123</div>
...
<script>
var a = document.querySelector('div');
 a.onclick= function(){
    console.log('aaa');// aaa
}
</script>

二. 事件绑定

(1) DOM 0级 事件

语法：事件源.on事件类型 = 事件处理函数

特点：同一个事件源的同一个事件类型只能绑定一个事件处理函数

<div></div>
<!----分割线---->
div.onclick = function () {
    console.log("绑定了一个点击事件");
};

(2) DOM 2级 事件

语法：事件源.addEventListener(‘事件类型’, 事件处理函数)

特点：可以同一个事件源的同一个事件类型绑定多个事件处理函数，会按照顺序依次触发

<div></div> 
<!----分割线---->
div.addEventListener("click", function () {
    console.log("绑定一个点击事件");
});

(3) 两种事件绑定的方式区别

DOM 0级 事件：同一个事件源的同一个事件类型只能绑定一个事件处理函数

如果同一个事件源的同一个事件类型绑定多个事件处理函数则后面的处理函数会进行覆盖前面的处理函数

DOM 2级 事件：可以同一个事件源的同一个事件类型绑定多个事件处理函数，会按照顺序依次触发

三. 事件解绑

(1) 解绑dom0级事件

语法：事件源.on事件类型 = null

<button>解绑dom0级事件</button>
<!----分割线---->
var div = document.querySelector("div");
div.onclick = function () {
    console.log("绑定0级事件");
};
var btn = document.querySelector("button");
btn.onclick = function () {
    div.onclick = null;
};

(2) 解绑dom2级事件

语法：事件源.removeEventListener(‘事件类型’, 要解绑的事件处理函数)

注意：如果用dom2级解绑， 绑定的时候的事件处理函数必须要在外面单独定义，用函数名的形式进行绑定

<button>解绑dom2级事件</button>
<!----分割线---->
var div = document.querySelector("div");
var clickFn = function () {
    console.log("绑定dom2级事件");
};
div.addEventListener("click", clickFn);
var btn = document.querySelector("button");
btn.onclick = function () {
    div.removeEventListener("click", clickFn);
};

四. 事件对象

当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。

可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存。

获取事件对象：

  • 标准浏览器

在事件处理函数有一个参数，参数就是事件对象

  • IE浏览器

IE浏览器天生有一个事件对象 window.event

// eg:
<div></div>
<!----分割线---->
var div = document.querySelector("div");
// 标准浏览器
div.onclick = function (e) {
    console.log(e);
};
// IE 浏览器事件对象
div.onclick = function () {
    console.log(window.event);
};
// 兼容性操作
div.onclick = function (e) {
    var e = e || window.event;
};

五. 鼠标事件对象

(1) client

光标相对于浏览器可视窗口左上角的坐标点

通俗理解就是：鼠标光标相对于肉眼可以看到的浏览器左上角的坐标点

语法：

事件对象.clientX
事件对象.clientY

(2) page

光标相对于文档流左上角的坐标点

通俗理解就是：鼠标光标相对于整个文档左上角的坐标点，就是即使页面向下滑动依然相对于最开始时的左上角坐标点。

语法：

事件对象.pageX
事件对象.pageY

(3) offset

光标相对于准确触发事件的元素左上角的坐标点

通俗理解就是：鼠标光标相对于要触发的元素的左上角的坐标点

语法：

事件对象.offsetX
事件对象.offsetY

三个鼠标事件对象实例：

// eg:
<style>
    * {
    margin: 0;
    padding: 0;
}
div {
    width: 200px;
    height: 300px;
    background-color: pink;
    margin: 100px;
    margin-top: 700px;
}
</style>

<div></div>

var div = document.querySelector("div");
div.onclick = function (e) {
    // 光标相对于 浏览器可视窗口 左上角的坐标点
    console.log("e.clientX, e.clientY");
    console.log(e.clientX, e.clientY);
    console.log("==========================");
    // 光标相对于 文档流 左上角的坐标点
    console.log("e.pageX, e.pageY");
    console.log(e.pageX, e.pageY);
    console.log("==================");
    // 光标相对于 准确触发事件的元素 左上角的坐标点
    console.log("e.offsetX, e.offsetY");
    console.log(e.offsetX, e.offsetY);
};

(4) 案例

案例1：实时显示鼠标坐标点

<h2>x坐标 <span class="x">0</span></h2>
<h2>y坐标 <span class="y">0</span></h2>
<!----分割线---->  
// 获取元素
var xBox = document.querySelector(".x");
var yBox = document.querySelector(".y");
document.onmousemove = function (e) {
    var x = e.clientX;
    var y = e.clientY;

    // 把 x 和 y 放到span中
    xBox.innerHTML = x;
    yBox.innerHTML = y;
};

效果图：

请添加图片描述

案例2：鼠标跟随

分析思路：

/*
    案例：鼠标跟随
        1. 在什么时候触发效果
            鼠标移入
            鼠标移出
            鼠标移动
        2. 在什么范围触发效果
            鼠标移入   当前的li
            鼠标移出   当前的li
            鼠标移动   当前的li
        3. 触发的效果是什么
            鼠标移入   让当前的li里面的p出现        display: block
            鼠标移出   让当前的li里面的p消失        display: none
            鼠标移动   p跟着鼠标移动                left top   光标距离准确触发事件的元素的左上角的坐标 offsetX offsetY

        一个小BUG 
            当从右向左滑动， 没问题
            当从左向右滑动， p标签抖动 
	原因：
            因为p是li的子元素
                当光标在p标签身上，也会触发li的效果 (触发了父元素mousemove效果)
            因为offset 一套 是准确触发事件元素的左上角的坐标点
                当光标在p身上 , offsetX offsetY获取的是光标距离p左上角的位置 
     解决：
            1. 让光标和p之间有个距离
            2. 让p标签保持一个穿透效果    pointer-events: none;
  */

<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
        width: 400px;
        height: 40px;
        border: 1px solid #000;
        margin-bottom: 10px;
        position: relative;
    }
    ul {
        margin: 100px;
    }
    p {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        z-index: 999;
        top: 10px;
        left: 10px;
        display: none;
        /* 禁止p的鼠标效果 */
        pointer-events: none;
    }
</style>
<body>
    <ul>
        <li class="box">
            第1个li
            <p>第1个li里面的p</p>
        </li>
        <li>
            第2个li
            <p>第2个li里面的p</p>
        </li>
        <li>
            第3个li
            <p>第3个li里面的p</p>
        </li>
    </ul>
</body>
<script>
    // 0 获取元素
    var liList = document.querySelectorAll("li");
    // 1 遍历  li给每个添加效果
    liList.forEach(function (li) {
        // 1-1 鼠标移入
        li.addEventListener("mouseover", overHandler);
        // 1-2 鼠标移出
        li.addEventListener("mouseout", outHandler);
        // 1-3 鼠标移动
        li.addEventListener("mousemove", moveHandler);
    });
    // 1-1 鼠标移入事件
    function overHandler() {
        // 让当前的li里面的p出现
        // 找到当前的li ===> 关键字 this
        // 找到li里面的p
        this.firstElementChild.style.display = "block";
    }
    // 1-2 鼠标移出
    function outHandler() {
        // 让当前的li里面的p消失
        // 当前的li ==> this
        // 当前的li里面的p this.firstElementChild
        this.firstElementChild.style.display = "none";
    }
    // 1-3 鼠标移动
    function moveHandler(e) {
        // 让 li 里面p 移动
        // 获取 鼠标指针距离 li的左上角的值
        var x = e.offsetX;
        var y = e.offsetY;
        this.firstElementChild.style.left = x + "px";
        this.firstElementChild.style.top = y + "px";
    }
</script>

效果图：

请添加图片描述

六. 键盘事件对象

事件对象信息

  1. 按下按个键

按下的是否是组合键

​ 2. 按下的是哪一个按键

事件对象内有一个信息，keyCode

  1. 按下的是否是组合键

在事件对象中有四个信息
shiftKey
ctrlKey
altKey
metaKey
以上四个信息值都是false, 按下的时候是true

<input type="text" name="" id="" />
<!----分割线---->
var inp = document.querySelector("input");
inp.onkeydown = function (e) {
    // 1.获取键盘编码
    // console.log(e.keyCode);
    // 2.获取功能键
    // console.log(e);
    // 3.按下的是否是组合键
    if (e.keyCode === 65 && e.shiftKey && e.ctrlKey) {
        console.log("同时按下 a + shift + ctrl");
    }
};

七. 事件传播

当行为发生的时候，会按照 父级 依次向上传递， 直到window

传播的三个阶段：

  1. 捕获 从window传递到事件目标的过程
  2. 目标 准确触发事件的元素
  3. 冒泡 从事件目标传递到window的过程

事件流机制：

  • 可以在冒泡阶段触发事件，也可以在捕获阶段触发事件
  • 默认是冒泡阶段触发事件
  • 完整过程：捕获 -> 目标 -> 冒泡

触发捕获阶段的事件

addEventListener接受三个参数

addEventListener('事件类型', 事件处理函数, true/false)

true 捕获阶段触发
false 冒泡阶段触发(默认)

事件的冒泡（Bubble）

  • 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发；
  • 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消；
  • 可以将事件对象的cancelBubble设置为true，即可取消冒泡。

例子：

元素.事件 = function(event){
    event = event || window.event;
    event.cancelBubble = true;
};

八. 阻止事件传播

  1. 什么时候需要阻止事件传播？

当我们的父子级结构都有相同的事件类型，就需要阻止事件传播

  1. 如何阻止事件传播

    语法：

    事件对象.stopPropagation()

<div></div>
<button>按钮</button>
<!----分割线----> 
// 点击 按钮 ，div出现
// 点击 document ， div消失
var div = document.querySelector("div");
var btn = document.querySelector("button");
// 由于事件冒泡，btn的点击事件会向上冒泡，触发到document
btn.onclick = function(e) {
    // 阻止事件传播
    e.stopPropagation();
    div.style.display = "block";
    console.log(1);
};
document.onclick = function() {
    div.style.display = "none";
    console.log(2);
};

九. 阻止默认行为

常见的默认行为：

  • 表单标签提交
  • a标签点击
  • 文本选择
  • 右键
  • …

阻止默认行为

语法 :

// 标准浏览器  事件对象.preventDefault()
// 通用 return false

案例：关闭鼠标右键默认弹窗，并设置自己的弹窗。

<style>
    div {
        width: 100px;
        height: 200px;
        background-color: pink;
        position: absolute;
        display: none;
    }
</style>
<body>
    <div></div>
</body>
<script>
    var div = document.querySelector("div");
    // 右键点击
    document.oncontextmenu = function (e) {
        // 1-1 本身的弹窗不出现  阻止默认行为
        e.preventDefault();
        // 1-2 div出现
        div.style.display = "block";
        // 1-3 div的位置和光标的位置一样
        var x = e.clientX;
        var y = e.clientY;
        div.style.left = x + "px";
        div.style.top = y + "px";
    };
    // 2) 左键点击
    document.onclick = function () {
        div.style.display = "none";
    };
</script>

效果图：

请添加图片描述

十. 事件委托

把子元素的事件交给父元素来绑定

作用：

元素的事件内， 通过事件目标（e.target） 判断准确触发事件的元素

优点：

  1. 可以减少操作dom的次数。
  2. 对于后面添加的元素很友好，并对子元素添加事件很有用。

案例

案例1：点击按钮，一次出现5个li，li标签里面有数字, 点击li，背景颜色变为绿色。

<style>
    * {
        padding: 0;
        margin: 0;
    }

    li {
        list-style: none;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        margin: 10px;
        flex-shrink: 0;
        background-color: #fff;
    }

    ul {
        padding: 30px;
        background-color: orange;
        display: flex;
        width: 400px;
        flex-wrap: wrap;
    }
</style>
<body>
    <button>点击</button>
    <ul>
        <li class="box">li1</li>
        <li class="box">li2</li>
        <li class="box">li3</li>
        <li class="box">li4</li>
        <li class="box">li5</li>
    </ul>
</body>
<script>
    var btn = document.querySelector("button");
    var ul = document.querySelector("ul");
    var count = 6;
    btn.onclick = function () {
        var str = "";
        for (var i = 1; i <= 5; i++) {
            str += `<li class='box'>li${count}</li>`;
            count++;
        }
        ul.innerHTML += str;
    };
    ul.onclick = function (e) {
        if (e.target.className === "box") {
            e.target.style.background = "green";
        }
    };
</script>

效果图：

请添加图片描述

案例2：select下拉

<style>
    html,
    body {
        height: 100%;
        overflow: hidden;
    }
    body,
    div,
    form,
    h2,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style-type: none;
    }
    body {
        background: #23384e;
        font: 12px/1.5 "微软雅黑";
    }
    #search,
    #search form,
    #search .box,
    #search .select,
    #search a {
        background: url(search.jpg) no-repeat;
    }
    #search,
    #search .box,
    #search form {
        height: 34px;
    }
    #search {
        position: relative;
        width: 350px;
        margin: 10px auto;
    }
    #search .box {
        background-position: right 0;
    }
    #search form {
        background-repeat: repeat-x;
        background-position: 0 -34px;
        margin: 0 20px 0 40px;
    }
    #search .select {
        float: left;
        color: #fff;
        width: 190px;
        height: 22px;
        cursor: pointer;
        margin-top: 4px;
        line-height: 22px;
        padding-left: 10px;
        background-position: 0 -68px;
    }
    #search a {
        float: left;
        width: 80px;
        height: 24px;
        color: #333;
        letter-spacing: 4px;
        line-height: 22px;
        text-align: center;
        text-decoration: none;
        background-position: 0 -90px;
        margin: 4px 0 0 10px;
    }
    #search a:hover {
        color: #f60;
        background-position: -80px -90px;
    }
    #search .sub {
        position: absolute;
        top: 26px;
        left: 40px;
        color: #fff;
        width: 198px;
        background: #2b2b2b;
        border: 1px solid #fff;
        display: none;
    }
    #search .sub li {
        height: 25px;
        line-height: 24px;
        cursor: pointer;
        padding-left: 10px;
        margin-bottom: -1px;
        border-bottom: 1px dotted #fff;
    }
    #search .sub li:hover {
        background: #8b8b8b;
    }
</style>
<body>
    <div id="search">
        <div class="box">
            <form>
                <span id="select" class="select">请选择游戏名称</span>
                <a href="javascript:;">搜索</a>
            </form>
        </div>
        <ul id="sub" class="sub">
            <li>地下城与勇士</li>
            <li>魔兽世界（国服）</li>
            <li>魔兽世界（台服）</li>
            <li>热血江湖</li>
            <li>大话西游II</li>
            <li>QQ幻想世界</li>
        </ul>
    </div>
</body>
<script>
    // 1 1) 点击span   ul出现
    select.onclick = function (e) {
        // 阻止事件冒泡
        e.stopPropagation();
        sub.style.display = "block";
    };
    // 2. 2) 点击document  ul 消失
    document.onclick = function () {
        sub.style.display = "none";
    };
    // 3) 通过事件委托的方式 把点击事件添加给ul 获取当前li里面的内容，把内容填到span中
    sub.onclick = function (e) {
        // 通过事件目标进行判断   e.target
        // 判断当前的事件目标是不是li 是的话就执行代码
        if (e.target.nodeName === "LI") {
            select.innerHTML = e.target.innerHTML;
        }
    };
</script>

效果图：

请添加图片描述

案例3：表格即时编辑

<body>
    <table border="1">
        <tr>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
        </tr>
        <tr>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
        </tr>
        <tr>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
        </tr>
        <tr>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
            <td>11111111111111</td>
        </tr>
    </table>
</body>
<script>
    var tdList = document.querySelectorAll("td");
    tdList.forEach(function (td) {
        td.onclick = function () {
            // 当td里面有一个input的时候就不需要触发下面的代码
            // 当td里面没有input的时候就需要触发下面的代码
            // "td里面没有子元素的时候"  td.children.length === 0
            if (td.children.length === 0) {
                var str = `<input type='text' value=${td.innerHTML}>`;
                td.innerHTML = str;
            }
            // 怎么获取输入框
            td.children[0].onblur = function () {
                // 输入框失去焦点
                var value = td.children[0].value;
                td.innerHTML = value;
            };
        };
    });
</script>

效果图：

请添加图片描述

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪

繁星学编程
关注
专栏目录
详解javascript事件冒泡
10-23
事件冒泡是JavaScript中非常重要的一个概念，它描述了事件在DOM树结构中的传播方式。在事件冒泡过程中，一旦某个元素上的事件被触发，...掌握好事件冒泡的相关知识，能够让开发者更加自如地处理各种复杂的交互场景。
JavaScript运动原理基础知识详解
10-15
### JavaScript运动原理基础知识详解 #### 1. 运动基础概念 在网页设计中，运动通常指的是页面元素位置或样式的动态变化。JavaScript运动原理的基础是定时器的使用，通过定时器可以每隔一定的时间执行函数来实现...
JavaScript 事件详解
weixin_57519357的博客
09-08 656
JS事件的基础知识总结
JavaScript 事件监听详解
xycxycooo的博客
07-16 2089
在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。
JavaScript事件流详解
2301_79098873的博客
05-05 668
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript事件流详解(1)
2401_84150191的博客
05-05 999
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JavaScript 事件流,事件冒泡及事件委托原理详解
m0_74086230的博客
10-26 374
事件流,事件冒泡及事件委托原理详解
知识：JavaScript构造函数详解
qq_43548684的博客
02-01 4550
借鉴各方面知识，囊括构造函数相关知识，添加个人理解，有不对的地方多多指出啦~
javascript事件（零基础详解）
十九万里的博客
04-09 6756
一、javascript事件基础 js基础太重要了，在后面操作的时候感觉有些不熟，回来又重新复习了一遍js的知识点，所以最近更新的都是一些js零碎的知识点。 js事件是在获取元素之后进行的操作，如果不不知道怎么获取元素的可以看其他博主的知识点、 1、什么是事件 js使我们有能力去创建动态页面，事件就是可以被js侦测到的行为 简单理解就是用户操作鼠标或者键盘后，触发了js事件，然后产生对应的机制 比如我们点击一个按钮，弹出对话框 2、事件的三要素 事件源>事件类型>事件处理程序 事件源
JavaScript详解语法和重点知识
weixin_45064346的博客
10-10 212
JavaScript基础 JavaScript 1.概念：一门客户端脚本语言 a.运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 b.脚本语言：不需要编译，直接就可以被浏览器解析执行了 2.功能： 可以用来增强用户和html页面交互过程，可以来控制html元素，让页面有一些动态效果，增强用户的体验 JavaScript发展史： 1.1992年， JavaSxript=ECMAScript+JavaScript自己特有的东西（BOM+DOM） ECMAScript：客户端脚本
JavaScript DOM 对象详解
xycxycooo的博客
07-16 976
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
javascript中json基础知识详解
11-26
虽然它的名字中有JavaScript但是它却不属于JavaScript,就像Java和JavaScript的关系一样。而且，并不是只有JavaScript才使用它,毕竟 JSON 只是一种数据格式。很多编程语言都有针对 JSON 的解析器和序列化器。 JSON是...
javascript监听页面刷新和页面关闭事件方法详解
11-28
JavaScript中的`onbeforeunload`和`...总的来说，理解和掌握`onbeforeunload`和`onunload`事件是JavaScript开发者在构建动态网页时必须了解的基础知识，它们为开发者提供了与用户交互和管理页面生命周期的重要工具。
javaScript基础知识详解
09-15
javaScript基础知识详解，适合新手入门和开发人员快速查阅
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 508
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
上门理发系统的搭建
最新发布
app830的博客
11-07 302
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 187
vxe-grid新增空行，并且定位到空行位置。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
cx18333的博客
11-05 506
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
Vue2+3
m0_73557953的博客
11-04 121
创建Vue实例 Vue指令
JavaScript事件流与事件处理详解
本章将深入探讨JavaScript事件的相关知识。 首先，了解事件流的概念至关重要。事件流描述了事件在DOM（文档对象模型）层次结构中传播的方式。主要有两种事件流模型：事件冒泡和事件捕获。事件冒泡是IE浏览器最初...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

繁星学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值