JavaScript【6】事件

news2025/5/18 10:14:07

1.概述:

  • 在 JavaScript 中,事件(Event)是浏览器或 DOM(文档对象模型)与 JavaScript 代码之间交互的一种机制。
    
  • 它代表了在浏览器环境中发生的特定行为或者动作,比如用户点击鼠标、敲击键盘、页面加载完成、元素获得或失去焦点等情况。这些事件可以被 JavaScript 代码捕获并进行相应的处理。
    

2.表单事件:

1.获取/失去焦点:onfocus/onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded">
    <input type="text" id="text"/>
<!--    <button type="submit">提交</button>-->
    <input type="submit"/>
</form>


<script>

    let text = document.getElementById("text");
    
     text.onblur = function () {
         //失去焦点时
         this.style.backgroundColor = "green";
     }
    text.onfocus = function () {
         //获得焦点时
         this.style.backgroundColor = "red";
     }
</script>


</body>
</html>
   

默认输入框背景无填充色,只有触发下面事件才会将背景填充为对应颜色

点击输入框,此时获得焦点,触发获得焦点事件,将输入框背景改为红色

点击输入框以外的区域,此时失去焦点,触发失去焦点事件,将输入框背景改为绿色

2.节点内容改变:onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded">
    <input type="text" id="text"/>
<!--    <button type="submit">提交</button>-->
    <input type="submit"/>
</form>


<script>

    let text = document.getElementById("text");
    
      text.onchange = function () {
        //节点的内容改变时
        console.log(this.value)
    }
</script>


</body>
</html>
    

当输入1时,控制台输入1;

当删除输入框中的1后再重新输入1,发现控制台没有再次输出,说明此时没有触发该事件;

当输入框内的内容发送改变时,会再次触发该事件,并将输入值打印到控制台;

3.输入框有内容输入时:oninput

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded">
    <input type="text" id="text"/>
<!--    <button type="submit">提交</button>-->
    <input type="submit"/>
</form>


<script>

    let text = document.getElementById("text");
    
     text.oninput = function () {
        //在用户输入时执行
        console.log(this.value)
    }
</script>


</body>
</html>
    

没有内容输入时,不触发该事件;

输入内容时,会将输入内容打印到控制台

当删除输入框内容时,会触发该事件,控制台打印空数据

当再次输入1时,再次触发该事件,控制台再次打印该数据

4.选取元素时:onselect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded">
    <input type="text" id="text"/>
<!--    <button type="submit">提交</button>-->
    <input type="submit"/>
</form>


<script>

    let text = document.getElementById("text");
    
     text.onselect = function () {
        console.log("选取元素时执行",this.value)
    }

</script>


</body>
</html>
    

输入框输入内容时,不触发该事件

当选取输入内容时,触发该事件,将输入内容打印到控制台

5.提交时:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded">
    <input type="text" id="text"/>
    <button type="submit">提交</button>
    <input type="submit"/>
</form>


<script>

    let myForm = document.getElementById("myForm");
    myForm.onsubmit = function () {
        // if(text.value.....){
        //.....
        // }
        //当返回值为fasle  阻止提交
        // true  允许提交
        return false;
    }*/

</script>


</body>
</html>
      

此时返回值为false,点击提交按钮时不会触发提交事件,该表单不会被提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded">
    <input type="text" id="text"/>
    <button type="submit">提交</button>
    <input type="submit"/>
</form>


<script>

    let myForm = document.getElementById("myForm");
    myForm.onsubmit = function () {
        // if(text.value.....){
        //.....
        // }
        //当返回值为fasle  阻止提交
        // true  允许提交
        return true;
    }

</script>


</body>
</html>
      

当返回值为true时,点击提交按钮会触发该事件,该表单会被提交(#表示提交到当前页面)

3.窗口事件:

1.获得/失去焦点时:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>
    window.onblur = function () {
        console.log('窗口失去了焦点')
    }
    window.onfocus = function () {
        console.log('窗口获得了焦点')
    }
    


</script>


</body>
</html>  

此时刚打开页面,不触发事件,所以控制台无输出

当点击左侧窗口区域时,触发获得焦点事件,控制台打印对应内容

当再次点击窗口外区域时,触发失去焦点事件,控制台再次打印对应内容

2.页面加载完成时:onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>
     window.onload= function () {
        //当页面加载完成后执行
        console.log("页面加载完成")
    }


</script>


</body>
</html>  

 当使用低网速加载测试时,可以发现,不是一打开页面就会触发该事件,而是只有当整个页面加载出来后,才会触发该事件;

3.窗口大小改变时:onresize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    window.onresize= function () {
        console.log("页面大小正在改变")
    }


</script>


</body>
</html>  

页面加载完成时,未触发事件

此时将窗口区域面积减小时,触发了该事件,并在控制台打印对应信息

4.键盘事件:

1.键盘按下时触发:onkeydown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>

     let text = document.getElementById("text");
    //键盘按下时执行
     text.onkeydown = function (event) {
        // 解决兼容问题
         event = event || window.event;
         // key 按键
         //console.log("按下的键:", event.keyCode)
     
         console.log("按下的键:",event.key)
     }
  

 

</script>


</body>
</html>

只要在键盘上按下按键,每按一次就会触发一次该事件,(如果长按则会重复触发),并将按键输出到控制台;

2.键盘弹起时触发:onkeyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>

     let text = document.getElementById("text");
     text.onkeyup = function (event) {
         console.log("按键弹起时:",event.key)
     }
  

 

</script>


</body>
</html>

当长按1时,不会触发该事件,只有当松开时,会触发1次该事件

3.按下弹起时触发:onkeypress

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>

     let text = document.getElementById("text");
      text.onkeypress = function (event) {
         console.log("按下弹起时:",event.key)
     }
  

 

</script>


</body>
</html>

只有当按下并松开时才会触发该事件

4.案例:通过方向键控制色块移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;">

</div>
<script>

    let box = document.getElementById("box");

    document.onkeydown = function (event) {
        let speed = 10;

        switch (event.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - speed + "px";
                break;
            case 39:
                box.style.left = box.offsetLeft + speed + "px";

                break;
            case 38:
                box.style.top = box.offsetTop - speed + "px";

                break;
            case 40:
                box.style.top = box.offsetTop + speed + "px";
                break;
        }

    }

</script>


</body>
</html>

这是页面刚加载出来时色块的位置,此时我们可以通过方向键改变色块的位置

5.鼠标事件:

1.单击左键触发:onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
    box.onclick = function () {
        console.log("单击事件触发");
    }
  

    

</script>
</body>
</html>

在元素区域(色块)内,单机鼠标左键,触发该事件

2.双击触发:ondblclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
    box.ondblclick = function () {
        console.log("双击事件触发");
    }
  

    

</script>
</body>
</html>

双击元素区域,触发该事件

3.鼠标任意按键按下或松开时触发:onmousedown/onmouseup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
      box.onmousedown = function () {
         console.log("鼠标按钮按下时");
     }
     box.onmouseup = function () {
         console.log("鼠标按钮松开时");
     }
  

    

</script>
</body>
</html>

在元素区域内按下或松开鼠标任意按键对会触发对应事件

4.鼠标指针移动时触发:onmousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
     box.onmousemove = function () {
         console.log("鼠标指针移动时");
     }
  

    

</script>
</body>
</html>

当鼠标指针在元素区域内移动时,就会重复触发该事件

5.鼠标指针移入或移出时触发:

不能阻止事件冒泡:onmouseover/onmouseout
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
       box.onmouseover = function () {
    // 不能阻止事件的冒泡
         console.log("鼠标指针移动到元素上时");
     }
     box.onmouseout = function () {
    // 不能阻止事件的冒泡
         console.log("鼠标指针移动出元素上时");
     }

    

</script>
</body>
</html>

当指针移入元素区域或移出元素区域时,都会触发对应事件

可以阻止事件冒泡:
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
       
     box.onmouseenter = function () {
         // 能阻止事件的冒泡
         console.log("鼠标指针移动到元素上时");
     }
    box.onmouseleave = function () {
        // 能阻止事件的冒泡
        console.log("鼠标指针移动出元素上时");
    }
    

</script>
</body>
</html>

当指针移入元素区域或移出元素区域时,都会触发对应事件

6.鼠标滚轮滑动时触发:

1.有无内容都可触发(滑动滚轮):onmousewheel
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
     // 有没有内容都会触发
   /* box.onmousewheel = function () {
        console.log("鼠标的滚轮滚动时")
    }*/
    
    

</script>
</body>
</html>
 

在元素区域内滑动鼠标滚轮,不管元素区域内有没有内容,都会触发该事件

2.必须有内容才会触发(滑动滚动条):
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    
</div>
<script>
    let box = document.getElementById("box");
   //有内容才能触发
     box.onscroll = function () {
         console.log("滚动条滚动了")
     }
    
    

</script>
</body>
</html>
 

此时元素区域内无内容,滑动鼠标滚轮不会触发该事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
    我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
</div>
<script>
    let box = document.getElementById("box");
   //有内容才能触发
     box.onscroll = function () {
         console.log("滚动条滚动了")
     }
    
    

</script>
</body>
</html>
 

此时元素区域内有内容,当我们滑动鼠标滚轮时会重复触发该事件

6.事件冒泡:

1.概述:

  事件冒泡 (Bubble):是指事件向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发;

2.示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: coral;
        }


    </style>
</head>
<body>
<div id="div1">
    我是DIV1
    <div id="div2">
        我是DIV2
    </div>
</div>
<script>
    
    let div1 = document.getElementById("div1");
    let div2 = document.getElementById("div2");

    div1.onclick = function () {
        console.log("div1 的单击事件触发了")
    }

    div2.onclick = function () {
        console.log("div2 的单击事件触发了")
        
    }
</script>
</body>
</html>
 

 在上面案例中,DIV2作为DIV1的子节点,当我们单击DIV2区域时,鼠标单击事件会向上传导到其父节点DIV1中,通过测试结果我们也可以看出当我们单击子节点div2时,不仅div2节点触发了该事件,其父节点div1节点也触发了该事件;

3.避免事件冒泡:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: coral;
        }


    </style>
</head>
<body>
<div id="div1">
    我是DIV1
    <div id="div2">
        我是DIV2
    </div>
</div>
<script>

    let div1 = document.getElementById("div1");
    let div2 = document.getElementById("div2");

    div1.onclick = function () {
        console.log("div1 的单击事件触发了")
    }

    div2.onclick = function () {
        console.log("div2 的单击事件触发了")
        stopBubble();
    }

    //取消事件的冒泡
    function stopBubble(event) {
    //处理浏览器兼容性问题
        if (event && event.stopPropagation) {
            event.stopPropagation()
        } else {
            window.event.cancelBubble = true;
        }
    }
</script>
</body>
</html>

此时单击div2区域,该事件不会再传导到其父节点div1中;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2378430.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32F10xx 参考手册

6. 什么是寄存器 本章参考资料&#xff1a;《STM32F10xx 参考手册》、《STM32F10xx数据手册》、 学习本章时&#xff0c;配合《STM32F10xx 参考手册》“存储器和总线架构”及“通用I/O(GPIO)”章节一起阅读&#xff0c;效果会更佳&#xff0c;特别是涉及到寄存器说明的部分。…

TIFS2024 | CRFA | 基于关键区域特征攻击提升对抗样本迁移性

Improving Transferability of Adversarial Samples via Critical Region-Oriented Feature-Level Attack 摘要-Abstract引言-Introduction相关工作-Related Work提出的方法-Proposed Method问题分析-Problem Analysis扰动注意力感知加权-Perturbation Attention-Aware Weighti…

Redis 发布订阅模式深度解析:原理、应用与实践

在现代分布式系统架构中&#xff0c;实时消息传递机制扮演着至关重要的角色。Redis 作为一款高性能的内存数据库&#xff0c;其内置的发布订阅(Pub/Sub)功能提供了一种轻量级、高效的消息通信方案。本文将全面剖析 Redis 发布订阅模式&#xff0c;从其基本概念、工作原理到实际…

飞帆控件 post or get it when it has get

我在这里分享两个链接&#xff1a; post_get_it 设计 - 飞帆 有人看出来这个控件是干什么用吗&#xff1f; 控件的配置&#xff1a;

SQL里where条件的顺序影响索引使用吗?

大家好&#xff0c;我是锋哥。今天分享关于【SQL里where条件的顺序影响索引使用吗&#xff1f;】面试题。希望对大家有帮助&#xff1b; SQL里where条件的顺序影响索引使用吗&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 SQL 查询中&#xff0c;W…

SAP学习笔记 - 开发豆知识02 - com.sap.cds.services.cds.CdsService 废止,那么用什么代替呢?

我看很多人代码里面用的都是这个CdsService类&#xff0c;可以自从2.0版本往上这个类就没了啊。 它的代替是什么呢&#xff1f;用的CqnService 那么怎么查的呢&#xff1f; 我也是下载好几个包&#xff0c;解压看&#xff0c;然后发现这里还可以直接看&#xff0c;挺方便的。…

OpenResty 深度解析:构建高性能 Web 服务的终极方案

引言 openresty是什么&#xff1f;在我个人对它的理解来看相当于嵌入了lua的nginx; 我们在nginx中嵌入lua是为了不需要再重新编译,我们只需要重新修改lua脚本,随后重启即可; 一.lua指令序列 我们分别从初始化阶段&#xff0c;重写/访问阶段&#xff0c;内容阶段&#xff0c;日志…

什么是路由器环回接口?

路由器环回接口&#xff08;LoopbackInterface&#xff09;是网络设备中的一种逻辑虚拟接口&#xff0c;不依赖物理硬件&#xff0c;但在网络配置和管理中具有重要作用。以下是其核心要点&#xff1a; 一、基本特性 1.虚拟性与稳定性 环回接口是纯软件实现的逻辑接口&#x…

【MySQL进阶】如何在ubuntu下安装MySQL数据库

前言 &#x1f31f;&#x1f31f;本期讲解关于如何在ubuntu环境下安装mysql的详细介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f3…

【数据结构】_二叉树

1.二叉树链式结构的实现 1.1 前置说明 在学习二叉树的基本操作前&#xff0c;需先要创建一棵二叉树&#xff0c;然后才能学习其相关的基本操作。由于现在大家对二叉树结构掌握还不够深入&#xff0c;为了降低大家学习成本&#xff0c;此处手动快速创建一棵简单的二叉树&#x…

给图表组件上点“颜色” —— 我与 CodeBuddy 的合作记录

我正在参加CodeBuddy「首席试玩官」内容创作大赛&#xff0c;本文所使用的 CodeBuddy 免费下载链接&#xff1a;腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 前段时间&#xff0c;我在开发一个 Vue3 项目的时候&#xff0c;碰到了一个小小的挑战&#xff1a;我想做一个可…

使用 YOLO 结合 PiscTrace 实现股票走势图像识别

在智能投研和金融分析中&#xff0c;自动识别图表中的模式&#xff08;如 K 线走势、支撑/阻力位、形态结构&#xff09;成为一种新兴手段。传统的技术分析依赖大量人工判断&#xff0c;而计算机视觉技术的发展&#xff0c;特别是 YOLO 模型在图像识别领域的高效表现&#xff0…

OpenCV中的光流估计方法详解

文章目录 一、引言二、核心算法原理1. 光流法基本概念2. 算法实现步骤 三、代码实现详解1. 初始化设置2. 特征点检测3. 光流计算与轨迹绘制 四、实际应用效果五、优化方向六、结语 一、引言 在计算机视觉领域&#xff0c;运动目标跟踪是一个重要的研究方向&#xff0c;广泛应用…

NBA足球赛事直播源码体育直播M33模板赛事源码

源码名称&#xff1a;体育直播赛事扁平自适应M33直播模板源码 开发环境&#xff1a;帝国cms7.5 空间支持&#xff1a;phpmysql 带软件采集&#xff0c;可以挂着自动采集发布&#xff0c;无需人工操作&#xff01; 演示地址&#xff1a;NBA足球赛事直播源码体育直播M33模板赛事…

电子电器架构 --- 整车造车阶段四个重要节点

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 钝感力的“钝”,不是木讷、迟钝,而是直面困境的韧劲和耐力,是面对外界噪音的通透淡然。 生活中有两种人,一种人格外在意别人的眼光;另一种人无论…

黑马点评-用户登录

文章目录 用户登录发送短信验证码注册/登录校验登录 用户登录 发送短信验证码 public Result sendCode(String phone, HttpSession session) {// 1.校验手机号if (RegexUtils.isPhoneInvalid(phone)) {// 2.如果不符合&#xff0c;返回错误信息return Result.fail("手机…

十二、Hive 函数

作者&#xff1a;IvanCodes 日期&#xff1a;2025年5月1日 专栏&#xff1a;Hive教程 在数据处理的广阔天地中&#xff0c;我们常常需要对数据进行转换、计算、清洗或提取特定信息。Hive 提供了强大的内置运算符和丰富的内置函数库&#xff0c;它们就像魔法师手中的魔法棒&…

No More Adam: 新型优化器SGD_SaI

一.核心思想和创新点 2024年12月提出的SGD-SaI算法&#xff08;Stochastic Gradient Descent with Scaling at Initialization&#xff09;本质上是一种在训练初始阶段对不同参数块&#xff08;parameter block&#xff09;基于**梯度信噪比&#xff08;g-SNR, Gradient Signa…

JSP链接MySQL8.0(Eclipse+Tomcat9.0+MySQL8.0)

所用环境 Eclipse Tomcat9.0 MySQL8.0.21(下载&#xff1a;MySQL Community Server 8.0.21 官方镜像源下载 | Renwole&#xff09; mysql-connector-java-8.0.21&#xff08;下载&#xff1a;MySQL :: Begin Your Download&#xff09; .NET Framework 4.5.2&#xff08;下…

SEO长尾词与关键词优化实战

内容概要 在SEO优化体系中&#xff0c;长尾关键词与核心关键词的协同作用直接影响流量获取效率与用户转化路径。长尾词通常由3-5个词组构成&#xff0c;搜索量较低但意图明确&#xff0c;能精准触达细分需求用户&#xff1b;核心关键词则具备高搜索量与广泛覆盖能力&#xff0…