当前位置： 首页 > news >正文

十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)

news 来源：原创 2025/7/29 15:19:49

1. 事件类型

1.1 鼠标事件

1.1.1 click 鼠标点击

1.1.2 mouseenter 鼠标进入

1.1.3 mouseleave 鼠标离开

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box">div 盒子</div><!-- 鼠标事件click 鼠标点击mouseenter 鼠标进入mouseleave 鼠标离开 --><script>const box = document.querySelector('.box')box.addEventListener('mouseenter', function () {console.log('mouseenter')})box.addEventListener('mouseleave', function () {console.log('mouseleave')})</script>
</body></html>

1.2 焦点事件

1.2.1 focus 获得焦点

1.2.2 blur 失去焦点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* css选择器 → 属性选择器 */[type=text] {width: 245px;height: 50px;padding-left: 20px;border: 1px solid #ccc;font-size: 17px;outline: none;}</style>
</head><body><input type="text" class="inp1" value="原本value"><input type="text" class="inp2"><!-- 焦点事件focus 获得焦点blur 失去焦点--><script>const inp1 = document.querySelector('.inp1')const inp2 = document.querySelector('.inp2')inp1.addEventListener('focus', function () {console.log('focus')})inp1.addEventListener('blur', function () {console.log('blur')console.log(inp1.value)})</script>
</body></html>

案例1_小米搜索框显示隐藏案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米搜索框显示隐藏案例</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi .search-text {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;}/* 搜索框边框颜色 */.mi .search {border: 1px solid #ff6700;}/* 下拉菜单 */.result-list {/* 先隐藏下拉菜单 */display: none;position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本" class="search-text"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>const searchText = document.querySelector('.search-text')const list = document.querySelector('.result-list')// 获得焦点：输入框的边框颜色变橙色search类；子菜单显示出来// display：none;none是隐藏；block（块级）searchText.addEventListener('focus', function () {this.classList.add('search')list.style.display = 'block'})// 失去焦点：输入框的边框颜色变灰色；子菜单隐藏起来searchText.addEventListener('blur', function () {this.classList.remove('search')list.style.display = 'none'})</script>
</body></html>

1.3 键盘事件

1.3.1 keydown 键盘按下

1.3.2 keyup 键盘抬起

1.4 文本事件 input

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>textarea {width: 300px;height: 30px;padding: 10px;border-color: transparent;outline: none;resize: none;background: #f5f5f5;border-radius: 4px;}</style>
</head><body><!-- input 不换行 --><textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea><!-- 键盘事件keydown 键盘按下keyup 键盘抬起文本事件 input 当表单value 被修改时触发执行顺序：keydown → input → keyup--><script>const tx = document.querySelector('#tx')tx.addEventListener('keydown', function () {console.log('键盘按下')})tx.addEventListener('input', function () {console.log('input')})tx.addEventListener('keyup', function () {console.log('键盘抬起')})</script>
</body></html>

案例2_统计用户输入字数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评论回车发布</title><style>...</style>
</head><body><div class="wrapper"><i class="avatar"></i><!-- maxlength 输入的最大字符数 --><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2099-10-10 20:29:21</p></div></div></div><!-- 统计用户输入字数需求：用户输入文字，可以计算用户输入的字数分析：①：文本域获得焦点则显示统计 total 盒子，失去焦点则隐藏统计 total 盒子②：文本域输入内容，使用input事件，不断取得字符长度（文本域.value.length ）③：把获得字符长度赋值给 total 字数统计盒子--><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')tx.addEventListener('focus', function () {total.style.opacity = 1})tx.addEventListener('input', function () {let num = tx.value.lengthtotal.innerHTML = `${num}/200字`})tx.addEventListener('blur', function () {total.style.opacity = 0})</script>
</body></html>

1.5 滚动事件 scroll

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面滚动事件</title><style>body {height: 3000px;}a {position: fixed;right: 10px;bottom: 10px;}</style>
</head><body><a href="#">返回顶部</a><!-- 滚动事件scroll 当元素或页面滚动时触发 --><script>// 监听整个页面滚动，window.addEventListener('scroll', function () { })// （监听某个元素的内部滚动直接给某个元素加即可）window.addEventListener('scroll', function () {// document.documentElement 获取html元素// document.body 获取body元素// scrollTop 获取被卷入的头部 scrollTop和scrollLeft可读写console.log(document.documentElement.scrollTop)})const btn = document.querySelector('a')btn.addEventListener('click', function () {// 页面滚动是 html元素 滚动 document.documentElement.scrollTop = 0})</script>
</body></html>

案例3_xtx返回顶部

  <!-- 返回顶部 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li></ul></div><script>const elevator = document.querySelector('.xtx-elevator')html = document.documentElementwindow.addEventListener('scroll', function () {if (html.scrollTop >= 1000) {elevator.style.display = 'block'} else {elevator.style.display = 'none'}})elevator.addEventListener('click', function () {html.scrollTop = 0})</script>

2. 事件对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;margin-bottom: 20px;background-color: pink;}textarea {width: 300px;height: 30px;padding: 10px;border-color: transparent;outline: none;resize: none;background: #f5f5f5;border-radius: 4px;}</style>
</head><body><div class="box"></div><textarea id="tx" placeholder="发一条友善的评论" rows="2"></textarea><!-- 事件对象：包含事件触发时的相关信息，包含属性和方法注册事件中，回调函数的第一个参数就是事件对象一般命名为event、ev、e--><!-- 事件对象-常见属性offsetX(number)：事件发生时，鼠标相对于事件源的x坐标offsetY(number)：事件发生时，鼠标相对于事件源的y坐标target(object)：事件源对象key(string)：如果是键盘相关事件，则事件对象中包含该属性，表示键盘事件发生时，按下的是什么键。'Enter'回车键--><script>const box = document.querySelector('.box')box.addEventListener('click', function (event) {console.log(event)})const tx = document.querySelector('#tx')tx.addEventListener('keydown', function (event) {console.log(event.key)})</script>
</body></html>

案例4_回车发布评论

<body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2099-10-10 20:29:21</p></div></div></div><!-- 需求：按下回车键，可以发布评论功能：①：按下回车，可以显示评论信息，并且评论内容显示到对应位置②：输入完毕，文本域清空内容，并且字数复原为 0--><script>const tx = document.querySelector('#tx')const list = document.querySelector('.list')const btn = document.querySelector('button')btn.addEventListener('click', function () {list.innerHTML = `<div class="item" style="display: flex;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">${tx.value}</p><p class="time">2099-10-10 20:29:21</p></div></div>`tx.value = ''})tx.addEventListener('keydown', function (e) {if (e.key === 'Enter') {btn.click()}})</script>
</body>

3. 事件流

3.1 事件捕获

3.2 事件冒泡

3.3 阻止冒泡

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {margin: 100px auto;width: 300px;height: 300px;background-color: skyblue;}.son {margin: 80px auto;width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="father">父盒子<div class="son">子盒子</div></div><!-- 事件流指的是事件完整执行过程中的流动路径,当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段事件捕获：当一个元素的事件被触发时，会从DOM的根元素开始依次调用同名事件 (从外到里)addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）,若传入false代表冒泡阶段触发，默认就是 false事件冒泡: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。事件冒泡是默认存在的,实际工作都是使用事件冒泡为主(子到父)阻止冒泡：若想把事件就限制在当前元素内，就需要阻止事件冒泡事件对象.stopPropagation()--><script>const father = document.querySelector('.father')const son = document.querySelector('.son')document.body.addEventListener('click', function (event) {console.log('body')})father.addEventListener('click', function (event) {console.log('father')})son.addEventListener('click', function (event) {console.log('son')event.stopPropagation()})</script>
</body></html>

3.4 鼠标经过/离开事件的区别

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {margin: 100px auto;width: 300px;height: 300px;background-color: skyblue;}.son {margin: 80px auto;width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="father">父盒子<div class="son">子盒子</div></div><!-- mouseover 和 mouseout 会有冒泡mouseenter 和 mouseleave 没有冒泡 (常用)--><script>const father = document.querySelector('.father')const son = document.querySelector('.son')father.addEventListener('mouseenter', function (event) {console.log('father')})son.addEventListener('mouseenter', function (event) {console.log('son')})/* father.addEventListener('mouseover', function (event) {console.log('father')})son.addEventListener('mouseover', function (event) {console.log('son')}) */</script>
</body></html>

3.5 阻止默认行为

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- form 表单区域 可以提交数据 action提交地址 --><form action="">姓名: <input type="text" name="username"><button>提交</button></form><a href="http://www.baidu.com">点击跳转</a><!-- 阻止默认行为：阻止元素发生默认的行为例如：当点击提交按钮时阻止对表单的提交，阻止链接的跳转等等 事件对象.preventDefault()--><script>const a = document.querySelector('a')a.addEventListener('click', function (e) {e.preventDefault()})// 表单的提交事件 → form submitconst form = document.querySelector('form')form.addEventListener('submit', function (e) {console.log('触发form')// 阻止默认行为e.preventDefault()})</script>
</body></html>

3.6 事件委托

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件委托</title><link rel="stylesheet" href="./index.css"><script src="./data.js"></script>
</head><body><div class="container"><button type="button" class="btn add" id="btn-add"><span>添加员工</span></button><table class="order"><thead><tr><th>头像</th><th>姓名</th><th>工号</th><th>入职时间</th><th>操作</th></tr></thead><tbody><tr><td><span class="username">管</span></td><td>管理员</td><td>10000</td><td>2022-10-24</td><td><button class="btn edit">编辑</button><button class="btn del">删除</button></td></tr><tr><td><span class="username">孙</span></td><td>孙彩</td><td>10000</td><td>2022-09-24</td><td><button class="btn edit">编辑</button><button class="btn del">删除</button></td></tr><tr><td><span class="username">罗</span></td><td>罗晓晓</td><td>10002</td><td>2022-08-24</td><td><button class="btn edit">编辑</button><button class="btn del">删除</button></td></tr></tbody></table></div><!-- 事件委托(Event Delegation)：也称为事件委派、事件代理将原本需要注册在子元素的事件委托给父元素，让父元素担当事件监听的职务优点：减少注册次数，可以提高程序性能; 动态生成的元素也能触发事件事件委托其实是利用事件冒泡的特点给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件--><script>// 需求： 点击每个删除按钮，都会弹出询问框确认是否删除const tbody = document.querySelector('tbody')tbody.addEventListener('click', function (e) {// 事件对象.target.classList.contains() 可以判断真正触发事件的元素是否包含指定类名if (e.target.classList.contains('del')) {console.log('del')}if (e.target.classList.contains('edit')) {console.log('edit')}})// 新增功能（素材代码，课上无需实现，课上只需讲解事件委托代码即可）document.querySelector('#btn-add').addEventListener('click', function () {// 随机用户名const uname = createRandomName()// 随机工号const workNum = createWorkNum()// 新增一行内容tbody.innerHTML += `<tr><td><span class="username">${uname[0]}</span></td><td>${uname}</td><td>${workNum}</td><td>2021-03-13</td><td><button class="btn edit">编辑</button><button class="btn del">删除</button></td></tr>`})</script>
</body></html>

案例5_价格筛选

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品渲染</title><style>...</style>
</head><body><!-- 筛选链接 --><div class="filter"><a class="tab" data-index="1" href="javascript:;">0-100元</a><a class="tab" data-index="2" href="javascript:;">100-300元</a><a class="tab" data-index="3" href="javascript:;">300元以上</a><a class="tab" href="javascript:;">全部区间</a></div><!-- 渲染盒子 --><div class="list"><!-- <div class="item"><img src="" alt=""><p class="name"></p><p class="price"></p></div> --></div><script>// 初始化数据const goodsList = [{id: '4001172',name: '称心如意手摇咖啡磨豆机咖啡豆研磨机',price: '289.00',picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',},]// 渲染商品列表function render(arr) {const str = arr.map(item => {const { name, price, picture } = itemreturn `<div class="item"><img src="${picture}" alt=""><p class="name">${name}</p><p class="price">${price}</p></div>`}).join('')document.querySelector('.list').innerHTML = str}render(goodsList)// 筛选功能const filter = document.querySelector('.filter')filter.addEventListener('click', function (e) {// console.log(e)// console.log(e.target)// console.log(e.target.dataset)let index = e.target.dataset.index// 0-100元if (index == 1) {// console.log(11)const newArr = goodsList.filter(el => {return el.price <= 100})render(newArr)} else if (index == 2) {const newArr = goodsList.filter(el => {return el.price <= 300})render(newArr)} else if (index == 3) {const newArr = goodsList.filter(el => {return el.price > 300})render(newArr)} else {render(goodsList)}})</script>
</body></html>

4. 移除事件监听

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button class="L2">L2事件</button><button class="L0">L0事件</button><!-- 移除事件监听, 移除事件处理函数,也称为解绑事件--><!-- 两种注册事件的区别⚫ 传统on注册（L0）➢ 同一个对象,后面注册的事件会覆盖前面注册(同名事件)➢ 直接使用null覆盖偶就可以实现事件的解绑➢ 只有冒泡阶段，没有捕获阶段⚫ 事件监听注册（L2）➢ 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)➢ 后面注册的事件不会覆盖前面注册的事件(同名事件)➢ 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)实现事件解绑➢ 可以通过第三个参数去确定是在冒泡或者捕获阶段执行➢ 匿名函数无法被解绑--><script>const L2 = document.querySelector('.L2')const L0 = document.querySelector('.L0')/* L2.addEventListener('click', function () {console.log('L2')}) *//* 移除L2事件监听addEventListener方式注册，必须使用：removeEventListener移除注意：匿名函数无法解绑*/function fn() {console.log('L2')}L2.addEventListener('click', fn)L2.removeEventListener('click', fn)/* 移除L0事件监听on事件方式，直接使用null覆盖偶就可以实现事件的解绑*/L0.onclick = function () {console.log('L0')}L0.onclick = null</script>
</body></html>

5. 作业

5.1 顺丰快递单号查询

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.search {position: relative;width: 178px;margin: 100px;}.sf {height: 30px;padding-left: 10px;outline: none;}.con {display: none;position: absolute;top: -43px;min-width: 178px;max-width: 440px;/* 让连续的数字自动换行 */word-wrap: break-word;border: 1px solid rgba(0, 0, 0, .2);box-shadow: 0 2px 4px rgba(0, 0, 0, .2);padding: 5px;font-size: 18px;line-height: 20px;color: #333;}.con::before {content: '';width: 10px;height: 10px;position: absolute;top: 25px;left: 18px;border-left: 1px solid rgba(0, 0, 0, .2);border-bottom: 1px solid rgba(0, 0, 0, .2);background-color: #fff;transform: rotate(-45deg);}</style>
</head><body><div class="search"><div class="con"></div><input type="text" placeholder="请输入您的快递单号" class="sf"></div><!-- 需求如下：输入框获得焦点，如果没有值需要隐藏放大框输入框焦去焦点，隐藏放大框输入框中输入内容，没有值就隐藏放大框，有值就显示放大框，并将输入内容显示在放大框中--><script>const ipt = document.querySelector('.sf')const con = document.querySelector('.con')let num = 0ipt.addEventListener('focus', function () {// console.log(ipt.value)// if (this.value !== '') {if (num > 0) {con.style.display = 'block'}})ipt.addEventListener('blur', function () {con.style.display = 'none'})ipt.addEventListener('input', function () {num = ipt.value.lengthif (num > 0) {con.style.display = 'block'con.innerText = ipt.value} else {con.style.display = 'none'}})</script>
</body>

5.2 小米密码框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米密码框</title><style>.mi-form {display: table;width: 356px;height: 60px;border-radius: 4px;border: 1px solid rgba(0, 0, 0, 0);background-color: #f9f9f9;}.mi-control {position: relative;display: table-cell;width: 294px;}.mi-input {box-sizing: border-box;width: 100%;height: 60px;border: 0;padding: 30px 20px 10px;outline: none;background: none;appearance: none;font-size: 17px;font-family: "Noto Color Emoji";color: #333;line-height: 20px;}.mi-control label {user-select: none;position: absolute;top: 20px;left: 20px;height: 20px;font-weight: 400;font-size: 17px;color: rgba(0, 0, 0, .4);line-height: 20px;transition: top .15s cubic-bezier(.4, 0, .2, 1), font-size .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}.mi-control label.active {top: 6px;font-size: 12px;color: #aaa;}.mi-password {display: table-cell;width: 60px;color: rgba(0, 0, 0, .85);font-size: 14px;vertical-align: middle;background: url(./images/close.png) center/30px 30px no-repeat;cursor: pointer;/* 防止选中文字 防止点击选中文本框的文字 */user-select: none;}.mi-password.active {background-image: url(./images/open.png);}</style>
</head><body><div class="mi-form"><div class="mi-control"><input type="password" class="mi-input"><label>密码</label></div><div class="mi-password"></div></div><!-- 输入框获得焦点，文字移动到输入框上面输入框失焦且输入框无内容，文字跑下来点击图标动态切换图标以及输入框的类型--><script>const ipt = document.querySelector('.mi-input')const label = document.querySelector('label')const password = document.querySelector('.mi-password')let pwClick = falseipt.addEventListener('focus', function () {label.classList.add('active')})ipt.addEventListener('blur', function () {if (ipt.value == '') {label.classList.remove('active')}})password.addEventListener('click', function () {pwClick = !pwClick/* if (pwClick) {ipt.type = 'text'this.style.backgroundImage = url('./images/close.png')} else {ipt.type = 'password'this.style.backgroundImage = url('./images/open.png')} */password.classList.toggle('active')ipt.type = pwClick ? 'text' : 'password'})</script>
</body></html>

5.3 掘金快捷导航

相关文章：

十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)

1. 事件类型 1.1 鼠标事件 1.1.1 click 鼠标点击 1.1.2 mouseenter 鼠标进入 1.1.3 mouseleave 鼠标离开 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widt…...

编程日记 2025/7/29 15:19:49

RabbitMQ学习-One

同步调用和异步调用 1.假设我们现在又两个服务&#xff0c;分别是修改商品服务和查询商品服务&#xff0c;每个服务都有自己的数据库&#xff1b; 2.左侧的流程假设我们总共需要耗时40ms&#xff1b; 3.因为不同服务数据库不一样&#xff0c;所以我们就要考虑修改了左边服务的…...

编程日记 2025/7/29 15:13:01

蓝队基础，网络七杀伤链详解

声明&#xff01; 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&#…...

编程日记 2025/7/25 18:37:29

机器学习实战：银行客户是否认购定期存款

项目结构与步骤 1. 项目概述 项目名称&#xff1a;葡萄牙银行电话营销活动分析与定期存款认购预测目标&#xff1a;通过分析银行的电话营销数据&#xff0c;构建模型预测客户是否会认购定期存款。数据来源&#xff1a;葡萄牙银行营销活动数据集关键挑战&#xff1a;数据不平衡…...

编程日记 2025/7/29 14:14:27

【一篇搞定配置】网络分析工具WireShark的安装与入门使用

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;各种软件安装与配置_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1.…...

编程日记 2025/7/28 23:29:20

气膜场馆照明设计：科技与环保的完美结合—轻空间

气膜场馆的照明设计&#xff0c;选用高效节能的400瓦LED灯具&#xff0c;结合现代节能技术&#xff0c;提供强大而均匀的光照。LED灯具在光效和寿命方面优势显著&#xff0c;不仅降低运营能耗&#xff0c;还有效减少碳排放&#xff0c;为绿色场馆建设贡献力量。 科学分布&…...

编程日记 2025/7/29 15:13:02

C语言程序编译和链接

编译环境和运行 编译环境也可以称为翻译环境&#xff0c;是将源代码转换为机器可以识别的二进制指令&#xff1b; 运行环境也可以称为执行环境&#xff0c;用于实际执行代码&#xff1b; 翻译环境 翻译环境由编译和链接两个部分组成&#xff0c;而编译又可以分解为&#x…...

编程日记 2025/7/27 16:09:50

springBoot整合 Tess4J实现OCR识别文字（图片+PDF）

1. 环境准备 JDK 8 或更高版本Maven 3.6 或更高版本Spring Boot 2.4 或更高版本Tesseract OCR 引擎Tess4J 库 2. 安装 Tesseract OCR 引擎 下载地址&#xff1a; Home UB-Mannheim/tesseract Wiki GitHub linux直接安装&#xff1a;sudo apt-get install tesseract-ocr 3.…...

编程日记 2025/7/29 13:10:16

阿里数字人工作 Emote Portrait Alive (EMO)：基于 Diffusion 直接生成视频的数字人方案

TL;DR 2024 年 ECCV 阿里智能计算研究所的数字人工作&#xff0c;基于 diffusion 方法来直接的从音频到视频合成数字人&#xff0c;避免了中间的三维模型或面部 landmark 的需求&#xff0c;效果很好。 Paper name EMO: Emote Portrait Alive - Generating Expressive Portra…...

编程日记 2025/7/27 23:39:41

Java将PDF保存为图片

将 PDF 文件转换为图片是常见的需求之一&#xff0c;特别是在需要将 PDF 内容以图像形式展示或处理时。其中最常用的是 Apache PDFBox。 使用 Apache PDFBox Apache PDFBox 是一个开源的 Java 库&#xff0c;可以用来处理 PDF 文档。它提供了将 PDF 页面转换为图像的功能。 …...

编程日记 2025/7/26 7:52:29

医药企业的终端市场营销策略

近年来&#xff0c;随着医药行业的快速发展&#xff0c;终端市场逐渐成为企业竞争的关键领域。在政策趋严、市场环境变化以及数字化转型的大背景下&#xff0c;医药企业如何在终端市场中立于不败之地&#xff1f;本文结合我们在医药数字化领域的经验&#xff0c;为大家剖析终端…...

编程日记 2025/7/29 6:17:36

使用EFK收集k8s日志

首先我们使用EFK收集Kubernetes集群中的日志&#xff0c;本次实验讲解的是在Kubernetes集群中启动一个Elasticsearch集群&#xff0c;如果企业内已经有了Elasticsearch集群&#xff0c;可以直接将日志输出至已有的Elasticsearch集群。 文章目录 部署elasticsearch创建Kibana创建…...

编程日记 2025/7/23 17:00:52

Vue3 + TypeScript 项目搭建

Vue3 TypeScript 项目搭建 环境准备 首先确保你的开发环境满足以下要求&#xff1a; # 检查 Node.js 版本 (需要 14.0 或更高版本) node -v# 检查 npm 版本 npm -v# 安装或更新 Vue CLI npm install -g vue/cli创建项目 使用 Vue CLI 创建项目&#xff1a; # 创建项目 np…...

编程日记 2025/7/26 21:43:43

Python操作neo4j库py2neo使用（一）

Python操作neo4j库py2neo使用&#xff08;一&#xff09; 安装&#xff08;只用于测试&#xff09; docker-compose .yml 文件 version: 3.8 services:neo4j:image: neo4j:5.6.0-enterprise #商业版镜像hostname: neo4jcontainer_name: neo4jports:- "7474:7474"-…...

编程日记 2025/7/28 10:36:38

（原创）Android Studio新老界面UI切换及老版本下载地址

前言 这两天下载了一个新版的Android Studio&#xff0c;发现整个界面都发生了很大改动&#xff1a; 新的界面的一些设置可参考一些博客&#xff1a; Android Studio新版UI常用设置 但是对于一些急着开发的小伙伴来说&#xff0c;没有时间去适应&#xff0c;那么怎么办呢&am…...

编程日记 2025/7/27 10:28:33

Linux——用户级缓存区及模拟实现fopen、fweite、fclose

linux基础io重定向-CSDN博客 文章目录 目录 文章目录 什么是缓冲区 为什么要有缓冲区 二、编写自己的fopen、fwrite、fclose 1.引入函数 2、引入FILE 3.模拟封装 1、fopen 2、fwrite 3、fclose 4、fflush 总结 前言 用快递站讲述缓冲区 收件区&#xff08;类比输…...

编程日记 2025/7/23 18:03:49

CKA认证 | Day2 K8s内部监控与日志

第三章 Kubernetes监控与日志 1、查看集群资源状态 在 Kubernetes 集群中&#xff0c;查看集群资源状态和组件状态是非常重要的操作。以下是一些常用的命令和解释&#xff0c;帮助你更好地管理和监控 Kubernetes 集群。 1.1 查看master组件状态 Kubernetes 的 Master 组件包…...

编程日记 2025/7/29 9:21:18

大模型部署，运维，测试所需掌握的知识点

python环境部署: python3 -m site --user-base 返回用户级别的Python安装基础目录 sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.8 1 将python3的默认路径/usr/bin/python3替…...

编程日记 2025/7/25 16:19:37

JDBC编程---Java

目录 一、数据库编程的前置 二、Java的数据库编程----JDBC 1.概念 2.JDBC编程的优点 三.导入MySQL驱动包 四、JDBC编程的实战 1.创造数据源&#xff0c;并设置数据库所在的位置&#xff0c;三条固定写法 2.建立和数据库服务器之间的连接&#xff0c;连接好了后&#xff…...

编程日记 2025/7/29 1:01:11

什么是沙箱(Sandbox)技术

沙箱技术是一种重要的计算机安全机制&#xff0c;主要用于隔离程序运行环境&#xff0c;以防止恶意代码或应用程序对系统和数据造成破坏。通过限制代码的访问权限和行为&#xff0c;沙箱为程序提供了一个受控且隔离的执行环境。 核心特点 隔离性沙箱运行的程序被限制在一个受控…...

编程日记 2025/7/27 10:33:05

TCP socket api详解

文章目录 netstat -nltpaccept简单客户端工具 telnet 指定服务连接connect异常处理version 1 单进程版version 2 多进程版version 3 -- 多线程版本version 4 ---- 线程池版本 创建套接字socket sockaddr_in结构体 bind 之后就和UDP不一样了。 因为TCP是一个面向连接的服务器&…...

编程日记 2025/7/29 2:37:43

Linux——环境变量

环境变量一般指的是在操作系统重用来指定操作系统运行环境的一些参数&#xff0c;这些参数会被bash使用&#xff0c;而bash是被我们用户使用的&#xff0c;也就是说&#xff0c;这些环境变量间接的也是被我们用户使用的。环境变量通常都有某些特殊的用途&#xff0c;它在系统重…...

编程日记 2025/7/29 13:02:11

Windows Pycharm 远程 Spark 开发 PySpark

一、环境版本 环境版本PyCharm2024.1.2 (Professional Edition)Ubuntu Kylin16.04Hadoop3.3.5Hive3.1.3Spark2.4.0 二、Pycharm远程开发 文件-远程-开发 选择 SSH连接&#xff0c;连接虚拟机&#xff0c;选择项目目录即可远程开发...

编程日记 2025/7/25 11:00:46

【es6进阶】vue3中的数据劫持的最新实现方案的proxy的详解

vuejs中实现数据的劫持,v2中使用的是Object.defineProperty()来实现的&#xff0c;在大版本v3中彻底重写了这部分&#xff0c;使用了proxy这个数据代理的方式&#xff0c;来修复了v2中对数组和对象的劫持的遗留问题。 proxy是什么 Proxy 用于修改某些操作的默认行为&#xff0…...

编程日记 2025/7/27 15:29:55

【Isaac Sim】加载自带模型或示例时报 Isaac Sim is not responding

Isaac Sim对电脑配置要求很高&#xff0c;开机第一次打开 Isaac Sim 时&#xff0c;直接就报 Isaac Sim is not responding 卡死了&#xff0c;这是由于第一次需要加载一些资源&#xff0c;耗时会导致 Isaac Sim 无响应&#xff0c;这里等一会会自动给回复。 加载自带模型或示…...

编程日记 2025/7/24 15:25:25

React (三)

文章目录 项目地址十二、性能优化12.1 使用useMemo避免不必要的计算12.2 使用memo缓存组件，防止过度渲染12.3 useCallBack缓存函数12.4 useCallBack里访问之前的状态（没懂）十三、Styled-Components13.1 安装13.2给普通html元素添加样式13.3 继承和覆盖样式13.4 给react组件添…...

编程日记 2025/7/26 22:50:58

C0031.在Clion中使用mingw编译器来编译opencv的配置方法

mingw编译器编译opencv库的配置方法...

编程日记 2025/7/1 15:07:03

多目标跟踪算法

文章目录 一、传统方法1. 基于卡尔曼滤波器的方法1.1 Kalman Filter(卡尔曼滤波器) 2. 基于数据关联的方法2.1 匈牙利算法 二、深度学习方法1. 基于检测的多目标跟踪1.1 SORT算法1.2 DeepSort1.3 BoT-SORT 2. 基于特征关联和增强的方法2.1 ByteTrack 3. 基于Transformer的方法3…...

编程日记 2025/7/26 13:46:16

【CSS in Depth 2 精译_059】9.2 把 CSS 模块组合成更大的结构

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第九章 CSS 的模块化与作用域】 ✔️ 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 ✔️ 9.2.1 模块中多个职责的…...

编程日记 2025/7/27 8:11:41

uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题

uniappvue3ts H5端使用Quill富文本插件以及解决上传图片反显的问题 1.在项目中安装Quill npm i quill1.3.72.需要显示富文本的页面完整代码 <template><view><div ref"quillEditor" style"height: 65vh"></div></view> &…...

编程日记 2025/7/29 5:12:05

shell（二）

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…...

编程日记 2025/7/28 9:04:52

在使用PCA算法进行数据压缩降维时，如何确定最佳维度是一个关键问题？

一、PCA算法的基本原理 PCA算法的核心思想是通过正交变换&#xff0c;将一组可能相关的变量转换成一组线性不相关的变量&#xff0c;称为主成分。这组主成分能够以最小的信息损失来尽可能多地保留原始数据集的变异性。具体来说&#xff0c;PCA算法包括以下几个步骤&#xff1a…...

编程日记 2025/7/28 19:50:48

学习嵩山版《Java 开发手册》：编程规约 - 命名风格（P1 ~ P2）

概述 《Java 开发手册》是阿里巴巴集团技术团队的集体智慧结晶和经验总结&#xff0c;他旨在提升开发效率和代码质量 《Java 开发手册》是一本极具价值的 Java 开发规范指南&#xff0c;对于提升开发者的综合素质和代码质量具有重要意义 学习《Java 开发手册》是一个提升 Jav…...

编程日记 2025/7/25 1:46:13

#渗透测试#红蓝攻防#HW#SRC漏洞挖掘01之静态页面渗透

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…...

编程日记 2025/7/25 5:52:58

开源POC库推荐

声明 学习视频来自 B 站UP主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 ✍&#x1f3fb;作者简介&#xff1a;致…...

编程日记 2025/7/24 10:35:34

深度学习每周学习总结J6（ResNeXt-50 算法实战与解析 - 猴痘识别）

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 0. 总结ResNeXt基本介绍 1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数&#xff1a;定义损失函数&…...

编程日记 2025/7/27 17:07:51

用vite下载的react + TS的项目,组件会调用两次

解决方案: 去掉main.tsx文件中的StrictMode...

编程日记 2025/7/5 15:05:28

STM32F4----DCA数字量转换成模拟量

STM32F4----DCA数字量转换成模拟量 基本原理 上一节讲诉了ADC的具体原理与程序搭建https://blog.csdn.net/qq_35970934/article/details/143999874?spm1001.2014.3001.5501。这节讲DAC的原理和程序&#xff0c;在实际应用中&#xff0c;我们经常需要调节电压的输出大小&…...

编程日记 2025/7/25 1:14:01

springboot3如何集成knife4j 4.x版本及如何进行API注解

1. 什么是Knife4j knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案, 取名knife4j是希望她能像一把匕首一样小巧,轻量,并且功能强悍!knife4j的前身是swagger-bootstrap-ui，swagger-bootstrap-ui自1.9.6版本后,正式更名为knife4j为了契合微服务的架构发展,由于原来…...

编程日记 2025/7/29 12:07:09

【Linux网络 (二)】套接字编程

Linux: 网络 一、前言二、端口号 (port)1&#xff09;port、套接字概念2&#xff09;端口号 vs 进程id3&#xff09;端口号和进程关系 三、认识TCP/Udp协议1&#xff09;连接性解释2&#xff09;可靠性解释3&#xff09;面向数据报/字节流解释 四、网络字节序五、struct sockad…...

编程日记 2025/7/27 1:15:41

SQL 语句执行计划中的连接方式

SQL 语句执行计划中的连接方式 join操作 join操作基本分为3大类&#xff1a;外连接&#xff08;细分为&#xff1a;左连接&#xff08;Left outer join/ left join&#xff09;、右连接&#xff08;right outer join/ right join&#xff09;、全连接&#xff08;full outer …...

编程日记 2025/7/29 7:33:07

3、集线器、交换机、路由器、ip的关系。

集线器、交换机、路由器三者的关系 1、集线器2、交换机&#xff08;每个交换机是不同的广播域&#xff0c;ip地址起到划分广播域的作用&#xff09;3、 路由器4、ip地址 1、集线器 一开始两台电脑通信就需要网线就可以&#xff0c;但是三台或者更多主机通信时&#xff0c;就需…...

编程日记 2025/7/28 17:46:04

OpenCV相机标定与3D重建(3)校正鱼眼镜头畸变的函数calibrate()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::fisheye::calibrate 函数是 OpenCV 中用于校正鱼眼镜头畸变的一个重要函数。该函数通过一系列棋盘格标定板的图像来计算相机的内参矩阵和畸变…...

编程日记 2025/7/28 16:52:38

【论文笔记】LLaVA-KD: A Framework of Distilling Multimodal Large Language Models

Abstract 大语言模型(Large Language Models, LLM)的成功&#xff0c;使得研究者为了统一视觉和语言的理解去探索多模态大预言模型(Multimodal Large Language Models, MLLM)。 但是MLLM庞大的模型和复杂的计算使其很难应用在资源受限的环境&#xff0c;小型MLLM(s-MLLM)的表现…...

编程日记 2025/7/24 12:06:03

C++内存管理和模板

文章目录 1. C内存管理1.1 new1.1.1 内置类型1.1.2 自定义类型1.1.3 定位new表达式1.1.4 new的优势与不足1.1.5 new的原理 1.2 delete1.2.1 内置类型1.2.2 自定义类1.2.3 delete和free1.2.4 delete原理 1.3 new和delete的对应1.3.1 内置类型1.3.2 自定义类型 2. 模板2.1 函数模…...

编程日记 2025/7/25 4:32:28

Docker 容器化开发 应用

Docker 常用命令 存储 - 目录挂载 存储 卷映射 自定义网络 Docker Compose语法 Dockerfile - 制作镜像 镜像分层机制 完结...

编程日记 2025/7/26 0:01:30

element-plus教程：Input Number 数字输入框

一、基础用法 要使用Input Number数字输入框&#xff0c;只需要在<el-input-number>元素中使用v-model绑定变量即可。例如&#xff1a; <template><el-input-number v-model"value" /> </template><script lang"ts" setup>…...

编程日记 2025/7/24 7:03:30

【Go语言成长之路】编写web应用

文章目录 编写Web应用一、介绍二、创建项目2.1 创建wiki数据结构2.2 介绍net/http包&#xff08;小插曲&#xff09;2.3 使用 net/http 提供 wiki 页面2.4 编辑Pages2.5 html/template包2.6 处理不存在的页面2.7 保存页面2.8 错误处理2.9 模板缓存2.10 验证2.11 函数文字和闭包…...

编程日记 2025/7/20 23:31:49

Java 对象头、Mark Word、monitor与synchronized关联关系以及synchronized锁优化

1. 对象在内存中的布局分为三块区域&#xff1a; &#xff08;1&#xff09;对象头&#xff08;Mark Word、元数据指针和数组长度&#xff09; 对象头&#xff1a;在32位虚拟机中&#xff0c;1个机器码等于4字节&#xff0c;也就是32bit&#xff0c;在64位虚拟机中&#xff0…...

编程日记 2025/7/27 17:38:34

安宝特分享 | 如何利用AR技术革新医疗实践：从远程急救到多学科协作

AR技术在国内外医院的应用 在现代医疗环境中&#xff0c;患者面临的挑战依然严峻&#xff1a;看病难、看病远、看病急。这些问题不仅影响了患者的治疗效果&#xff0c;也让医务工作者倍感压力。幸运的是&#xff0c;随着增强现实&#xff08;AR&#xff09;技术的发展&#xf…...

编程日记 2025/7/27 5:50:30