title (网站开发),二手交易网站建设目标,title:(网站开发),上海公司变更联贝财务优势监听事件
介绍
事件监听是一种用于在特定条件下执行代码的编程技术。在Web开发中#xff0c;事件监听器可以用于捕获和响应用户与页面交互的各种操作#xff0c;如点击、滚动、输入等。
事件监听的基本原理是#xff0c;通过在特定元素上注册事件监听器#xff0c;当事件…监听事件
介绍
事件监听是一种用于在特定条件下执行代码的编程技术。在Web开发中事件监听器可以用于捕获和响应用户与页面交互的各种操作如点击、滚动、输入等。
事件监听的基本原理是通过在特定元素上注册事件监听器当事件在该元素上触发时相应的处理函数会被执行。以下是事件监听的基本步骤 选择要监听事件的元素可以使用JavaScript中的document.getElementById()、document.getElementsByClassName()等方法或者使用现代的JavaScript库和框架如jQuery、React等提供的选择器来选择要监听事件的元素。 注册事件监听器使用元素的addEventListener()方法来注册事件监听器该方法接受两个参数要监听的事件类型和事件发生时要执行的处理函数。例如element.addEventListener(click, handleClick)。 编写事件处理函数根据需要编写处理函数它会在事件触发时被调用。处理函数可以接收一个事件对象作为参数其中包含了与事件相关的信息例如触发事件的元素、鼠标位置等。 执行相应的操作在事件处理函数中编写代码来执行想要的操作例如修改页面内容、发送请求、更新数据等。 可选注销事件监听器。如果不再需要监听某个事件可以使用removeEventListener()方法来注销事件监听器以释放资源。例如element.removeEventListener(click, handleClick)。
推荐写法 页面加载事件
加载外部资源如图片外链css和JavaScript加载完毕时触发的事件。
基本使用当我们需要实现只有资源显示的时候才执行对应步骤的效果时可以使用页面加载事件load比如说当打开一个小说网站的时候章节还没有加载完成如果这时候鼠标一通乱点可能会执行一些用户不想要执行的事件或导致体验感很差。
这边举一个常见的渲染案例。
效果展示 代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title/titlestyle*{padding:0;margin:0;box-sizing: border-box;}ul {width: 650px;}li{margin:10px;float: left;list-style: none;width: 100px;height: 100px;background-size: cover;transition: all .4s;}li:hover{transform: scale(1.2);border: 1px solid #ccc;box-shadow: 0 0 10px rgba(1,1,1,0.5);}/style
/head
bodydiv classmainul/ul/divscriptconst ul document.querySelector(.main ul)for(let i 1 ; i 10 ; i){const li document.createElement(li)li.style.backgroundImage url(../Selenium入门/极简壁纸/${i}.jpg)ul.append(li)}/script
/body
/html
这是基本的渲染模块我们加入一个事件监听。
加载事件
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}ul {width: 650px;}li {margin: 10px;float: left;list-style: none;width: 100px;height: 100px;background-size: cover;transition: all .4s;}li:hover {transform: scale(1.2);border: 1px solid #ccc;box-shadow: 0 0 10px rgba(1, 1, 1, 0.5);}/style
/headbodydiv classmainul/ul/divscriptwindow.onload function () {const ul document.querySelector(.main ul)for (let i 1; i 10; i) {const li document.createElement(li)li.style.backgroundImage url(../Selenium入门/极简壁纸/${i}.jpg)ul.append(li)}}/script
/body/html
页面点击事件
点击指定模块后执行相应的操作使用click事件
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}ul {width: 650px;}li {margin: 10px;float: left;list-style: none;width: 100px;height: 100px;background-size: cover;transition: all .4s;}li:hover {transform: scale(1.2);border: 1px solid #ccc;box-shadow: 0 0 10px rgba(1, 1, 1, 0.5);}.d {position: fixed;right: 0;top: 100px;background-color: #ccc;}/style
/headbodydiv classddiv stylecolor: red; data-id1顶部栏/divdiv stylecolor:blue data-id2下边栏/div/divdiv classmainul/ul/divscriptwindow.onload function () {const ul document.querySelector(.main ul)for (let i 1; i 10; i) {const li document.createElement(li)li.style.backgroundImage url(../Selenium入门/极简壁纸/${i}.jpg)ul.append(li)}// 点击事件在这里//开始const top document.querySelector(div[data-id1])const end document.querySelector(div[data-id2])top.addEventListener(click,function(){console.log(点了一下,top.innerHTML)})end.addEventListener(click,function(){console.log(点了一下,end.innerHTML)})//结束}window.addEventListener(scroll, function () {console.log(1)})/script
/body/html 页面滚动事件
看代码还能看段小说想获取的话看我之前的博客。直接scroll然后执行相应的事件
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}ul {width: 650px;}li {margin: 10px;float: left;list-style: none;width: 100px;height: 100px;background-size: cover;transition: all .4s;}li:hover {transform: scale(1.2);border: 1px solid #ccc;box-shadow: 0 0 10px rgba(1, 1, 1, 0.5);}/style
/headbodydiv classmainul/ul/divdiv第4章敲门咚咚咚。沉闷怪异的敲门声依然以一个固定的频率响起如一个调好的闹钟发出声响。教室的大门并没有锁上甚至都没有拴住只是随意的关上了而已只要稍微用力的话就能轻易的推开。但是让人毛骨悚然的是那个身穿黑色长衫浑身布满尸斑的老人并没有推开大门依然僵硬的站在那门外敲响着大门没有丝毫想要进来的意思。可那老人虽然没有进来但走廊外如墨汁一般浓郁的黑暗却是迅速袭来。整个教室开始发生了难以想象的巨大变化。崭新的墙壁上变的斑驳发霉墙皮不断的脱落下来变成了凹凸不平的墙面那坑坑洼洼的墙面上更事长出了黑绿色的霉菌散发出了一股阴冷湿晦的味道座椅上的书本迅速的变黄然后腐烂甚至连地面上的水泥也开始迅速的被风化了露出了锈迹斑斑的钢筋有些地方甚至开始出现了坍塌。仿佛在一瞬间的功夫这里已经经历了几十年的时间被岁月给摧残。然而教室的灯光还在极力抗争着这股黑暗白亮的灯光就像是风中残烛散发出最后一丝昏暗的光亮仿佛随时都要熄灭了一样。恐惧出现在每一个学生的脸上有人尖叫有人呼救也有人颤抖唯一镇定的是讲台上的周正。他一动不动目光四处打量留意着周围的任何动静。危险级别的鬼还能拥有鬼域.这不是他能对付的。“周正你看。”这个时候方镜突然喊了一声他脸色格外难看指着教室课桌上的几个同学。之前并未留意此刻看见方才反应过来。“咚咚咚。”敲门声再次响起。这个时候刚才站在人群里活着的男同学突然浑身一颤然后整个人僵直的栽倒在了地上。“李明你怎么了”“怎么会这样怎么会这样谁来救救我们啊。”有女同学吓的瘫坐在地上哭泣道。“还之前还好好的怎么突然就”有人声音颤抖哆哆嗦嗦的说道。一旁的方镜脸色铁青“乱叫什么门外有一只鬼我们怎么死都有可能能产生鬼域的鬼有多恐怖你们很快就会知道了。”其他人惊恐不已的看着他一个个像是落入笼子之中的猎物满是恐惧慑慑发抖。“周正还没有想出办法么再想不出来我们都要死在这里。”方镜又怒道。他心中也在颤抖因为鬼域之中谁都可能会死去包括他。“啰嗦你等不及的话就自己逃去别指望我。”周正也一脸焦急他不敢轻举妄动。“鬼域之中乱跑死的更快你当我什么都不知道么”方镜道。“既然知道就给我站在那里老实待着真要死你以为就你会死所有人都一样别以为知道一些东西就觉得自己很特殊在鬼的面前人人平等。”周正道。“妈的。”方镜忍不住骂了一声。杨间此刻也手脚冰冷他强迫自己冷静下来因为这个时候不是开玩笑。可当他无意间看见那几乎要在墙壁上掉落下来的黑板时顿时楞了一下。目光停留在了之前周正所写的那三句话上尤其是最后一句洞察鬼的规律。“周正不敢轻举妄动是因为他也在观察门外的那老人寻找他的规律只有找出规律他才敢行动快想想快想想这老人到底有什么规律可寻.”他脑子开始疯狂的转动起来回想论坛里那个故事记录的一切再联想到这眼前发生的事情。一定会有共同点一定会有相似的地方。那个叫雷电法王的网友是在家里当时他家的门是关上的这个老人站在门外敲门然后进来了接着来到房门口再次敲门然后又进来了。此刻这只鬼出现在走廊外同样也在敲门.但是还没有进来。为什么在那网友家中这老人进来了这里却没有进来同样的情况同样的事情是什么导致了其中的差异。是时间不够么那么是什么时间不够。难道是敲门的时间不够也许就是这里是关键。拼了。蓦地杨间鼓起勇气喊道“周正是敲门声。”“敲门声”周正一凝目光灼灼的盯着这个突然出声的学生“怎么说。”杨间忍住恐惧道“虽然只是猜测但我觉得这东西是在通过敲门方式来杀人的也许那老人是在计时也许是别的什么但一定和敲门有关如果能制止那东西敲门的话或许有用.”敲门杀人。如果真是这样那这鬼也未免太可怕了。“这家伙的潜力这么快就开始显现出来了”方镜目光很不善的看着他死死的捏住了拳头“绝不能让他活着离开这学校。”“相信你一回。”周正凝重的收回目光他没有选择的余地。再不行动这里的所有人都会死。立刻周正动了他如一头狂暴的野兽般冲了出去上瘦下肥的怪异身躯拥有着常人所不及的爆发力。“砰~”一声巨响教室的大门被他硬生生的撞开了同时撞开了还有教室外那个身穿黑色长衫一脸死灰浑身长满尸斑的老人。老人撞倒跌在了地上可是没有人敢扶。他的身躯呈现一个怪异的姿势就像是一个随意摆动手脚的僵直人偶一样没有活人该有的韧性和柔软。鬼是杀不死的。周正自己写下的话自己当然不会忘记。哪怕这个老人被碾成泥烧成灰依然不会死还会以一个匪夷所思的方式继续出现。能对付鬼的只有鬼。周正一咬牙回头吼道“你们看准时机一有机会就逃出去我来拖住这东西。”说完他那宽大的风衣下鼓起的肚子诡异的蠕动了几下。一只手确切的说是一个手的轮廓在一层皮肤的包裹下伸了出来这只手呈现灰青色指甲尖锐仿佛要撕开那层肚皮从里面探出来。但包裹那只手的肚皮十分有韧性并没有被撕破而且让人恐惧的是这只手足足伸出了两米多。这还是人的手么就这样这只灰青色的怪手抓住了地上的老人。“滋滋~”灯管闪烁的声音响起。瞬间笼罩在教室内的黑暗消失不见了明亮的灯光再次出现虽然墙壁依然斑驳地面还是要塌陷的样子但似乎灾难得到了制止。“有用。”周正心中微微松了口气。但随后让他的眼睛却是陡然睁大消瘦的几乎皮包骨的脸上被一股恐惧笼罩。倒在地上的老人此刻缓缓的站了起来死灰色的眼睛微微转动了一下似乎看向了周正。“不可能被我限制了还能动”周正脸色大变当即回头吼道“走快走趁着鬼域还没有出现离开这里我留在这里拖住这玩意。”这鬼绝对不只是危险级别。他心中冷汗直冒。请收藏本站https://www.bige3.cc。笔趣阁手机版https://m.bige3.cc /divscriptwindow.onload function () {const ul document.querySelector(.main ul)for (let i 1; i 10; i) {const li document.createElement(li)li.style.backgroundImage url(../Selenium入门/极简壁纸/${i}.jpg)ul.append(li)}}window.addEventListener(scroll,function(){console.log(1)})/script
/body/html 基本使用的方法
使用scrollTop获取滚动的高度这个高度指的是 页面被卷起来的高度也可以直接修改页面高度使用document.documentElement.scrollTop 指定高度 这段代码用来直接修改当前页面的高度。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title/titlestyle* {padding: 0;margin: 0;box-sizing: border-box;}ul {width: 650px;}li {margin: 10px;float: left;list-style: none;width: 100px;height: 100px;background-size: cover;transition: all .4s;}li:hover {transform: scale(1.2);border: 1px solid #ccc;box-shadow: 0 0 10px rgba(1, 1, 1, 0.5);}.d {position: fixed;right: 0;top: 100px;background-color: #ccc;}/style
/headbodydiv classddiv stylecolor: red; data-id1顶部栏/divdiv stylecolor:blue data-id2下边栏/div/divdiv classmainul/ul/divscriptwindow.onload function () {const ul document.querySelector(.main ul)for (let i 1; i 10; i) {const li document.createElement(li)li.style.backgroundImage url(../Selenium入门/极简壁纸/${i}.jpg)ul.append(li)}const top document.querySelector(div[data-id1])const end document.querySelector(div[data-id2])top.addEventListener(click,function(){//点击侧边栏的时候直接跳转到顶部document.documentElement.scrollTop 0})end.addEventListener(click,function(){console.log(点了一下,end.innerHTML)//跳转到底部document.documentElement.scrollTop 1000})//结束}window.addEventListener(scroll, function () {console.log(1)})/script
/body/html
记得点击事件应该在windows加载成功后才有的所以要把事件获取写道onload之中
页面尺寸事件使用resize事件
方法讲解:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title/titlestylediv{width: 500px;height: 500px;background-color: pink;}/style
/head
bodydiv idcontainer/divscript// 获取容器元素var container document.getElementById(container);// 定义处理函数function handleResize() {// 获取当前窗口的宽度和高度var windowWidth window.innerWidth || document.documentElement.clientWidth;var windowHeight window.innerHeight || document.documentElement.clientHeight;// 根据窗口大小调整容器样式if (windowWidth 600) {container.style.backgroundColor red;container.style.color white;} else if (windowWidth 600 windowHeight 800) {container.style.backgroundColor blue;container.style.color white;} else {container.style.backgroundColor yellow;container.style.color black;}}// 添加事件监听器window.addEventListener(resize, handleResize);/script
/body/html
属性
获得宽高offsetWidth offsetHeigh 获取元素的宽这个值包含元素自身设置的宽高注意如果盒子时隐藏的获取的结果是0注意该属性是只读属性并不可以修改。
焦点事件
直接使用focus (获得焦点)和blur失去焦点
获得焦点focus事件是当元素获得焦点时触发的事件。元素获得焦点意味着用户的操作重点放在该元素上通常是通过点击或者通过键盘导航Tab 键来实现。例如当用户点击一个文本输入框时该输入框就会获得焦点这时就会触发focus事件。我们可以通过监听focus事件来执行特定的操作比如显示相关的提示信息、改变样式等以增强用户交互体验。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyinput typetext name idscriptconst input document.querySelector(input)input.addEventListener(focus, function () {input.value 你好亲爱的读者input.style.color red})input.addEventListener(blur, function () {input.value 你好亲爱的读者input.style.color pink})/script
/body/html 键盘事件
点击键盘keydown脱离键盘keyup
其中监听对象e是记录键盘敲击按键对象key是按键名称
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput typetextscriptconst input document.querySelector(input)input.addEventListener(keydown,function(e){ console.log(e.key)console.log(键盘敲0下)})input.addEventListener(keyup,function(){console.log(键盘起来)})/script
/body
/html 表单提交事件 表单事件submit、change当用户提交表单或更改表单字段的值时触发。
change时只有当内容改变时才触发
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyinput typetextscriptconst text document.querySelector(input)text.addEventListener(change,function(){console.log(修改了)})/script
/body
/html
鼠标事件
.鼠标事件mousedown(点击)、mouseup释放、mousemove移动当用户在页面上移动鼠标或按下鼠标按钮时触发。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodybutton idmyButton点击我/buttonscriptconst button document.getElementById(myButton);button.addEventListener(mousedown, function () {console.log(按下鼠标按钮);});button.addEventListener(mouseup, function () {console.log(释放鼠标按钮);});button.addEventListener(mousemove, function () {console.log(移动鼠标);});/script
/body/html
以上是基本的事件监听要是对你有帮助的话请留下一个赞。
