帝国cms 网站地图 xml,北京正规网站建设比较,wordpress 连接被重置,营销推广网8.1获取事件对象
●事件对象是什么 也是个对象#xff0c;这个对象里有事件触发时的相关信息 例如#xff1a;鼠标点击事件中#xff0c;事件对象就存了鼠标点在哪个位置等信息 ●使用场景 可以判断用户按下哪个键#xff0c;比如按下回车键可以发布新闻 可以判断鼠标点击…8.1获取事件对象
●事件对象是什么 也是个对象这个对象里有事件触发时的相关信息 例如鼠标点击事件中事件对象就存了鼠标点在哪个位置等信息 ●使用场景 可以判断用户按下哪个键比如按下回车键可以发布新闻 可以判断鼠标点击了哪个元素从而做相应的操作 ●语法如何获取 在事件绑定的回调函数的第一个参数就是事件对象 一般命名为event、ev、e
8.2获取事件对象
●部分常用属性 ➢type 获取当前的事件类型 ➢ clientX / clientY 获取光标相对于浏览器可见窗口左上角的位置 ➢ offsetX / offsetY 获取光标相对于当前DOM元素左上角的位置 ➢key 用户按下的键盘键的值 现在不提倡使用keyCode
【示例】
bodyinput typetextscriptconst input document.querySelector(input)input.addEventListener(keyup, function (e) {if (e.key Enter) {console.log(我按下了回车)}})/script
/body●案例-按下回车发布评论 需求按下回车键盘可以发布信息 分析: ①用户按下键盘事件keydown或者keyup都可以 ②如果用户按下的是回车键盘则发布信息 ③让留言信息模块显示把拿到的数据渲染到对应标签内部 【示例代码】
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title评论回车发布/titlestyle.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}/style
/headbodydiv classwrapperi classavatar/itextarea idtx placeholder发一条友善的评论 rows2 maxlength200/textareabutton发布/button/divdiv classwrapperspan classtotal0/200字/span/divdiv classlistdiv classitem styledisplay: none;i classavatar/idiv classinfop classnameKai/pp classtext大家都辛苦啦感谢各位大大的努力能圆满完成真是太好了[笑哭][支持]/pp classtime2023-07-30 10:41:21/p/div/div/divscriptconst tx document.querySelector(#tx)const total document.querySelector(.total)//1.当文本域获得了焦点就让 total 显示出来tx.addEventListener(focus, function () {total.style.opacity 1})//2.当文本域失去焦点就让 total 隐藏起来tx.addEventListener(blur, function () {total.style.opacity 0})// 3.用户输入tx.addEventListener(input, function () {total.innerHTML ${tx.value.length}/200字})// 4.按下回车发布评论const item document.querySelector(.item)const text document.querySelector(.text)tx.addEventListener(keyup, function (e) {if (e.key Enter) {if (tx.value.trim()) { //trim() 去除左右空格//显示评论item.style.display blocktext.innerHTML tx.value}//按下回车 清空文本框和字数tx.value total.innerHTML 0/200字}})/script
/body/html8.3 trim()方法
作用去除左右空格 【示例】
scriptconst str blue or pink console.log(str.trim())
/script
