南通网站建设top,wordpress 导入网站模板,培训门户网站源码,网站的主机空间是事件监听事件监听版本事件类型事件概念事件在编程时系统内发生的动作或者发生的事情例子点击按钮鼠标经过拖拽鼠标事件监听#xff08;注册事件#xff0c;绑定事件#xff09;让程序员检测是否有事件产生#xff0c;一旦有事件触发#xff0c;就立即调用一个函数做出响应…事件监听事件监听版本事件类型事件概念事件在编程时系统内发生的动作或者发生的事情例子点击按钮鼠标经过拖拽鼠标事件监听注册事件绑定事件让程序员检测是否有事件产生一旦有事件触发就立即调用一个函数做出响应语法元素.addEventListener(事件,要执行的函数)事件监听三要素事件源哪个DOM元素被事件触发了要获取DOM元素事 件用什么方式触发比如:鼠标单击click鼠标经过mouseover事件调用什么函数要做什么代码 button点击我/buttondiv经过我/divscript//1获取按钮元素let btn document.querySelector(button)//2事件源btn.addEventListener(click, function () {alert(努力学习啊啊啊啊啊啊啊啊)})let boxdocument.querySelector(div)box.addEventListener(mouseover, function () {alert(努力挣钱啊啊啊啊啊啊啊啊)})/script例子 关闭二维码二维码旁边有一个关闭按钮点击然后关闭二维码 style* {margin: 0;padding: 0;}.erweima {position: relative;width: 160px;height: 160px;margin: 100px auto;border: 1px solid #ccc;}.erweima i {position: absolute;left: -13px;top: 0;width: 10px;height: 10px;border: 1px solid #ccc;font-size: 12px;line-height: 10px;color: #ccc;font-style: normal;cursor: pointer;}/style/headbodydiv classerweimaimg src./images/code.png alt /i classclose_btnx/i/divscript//1获取元素let btn document.querySelector(.close_btn)let code document.querySelector(.erweima)//2事件监听btn.addEventListener(click, function () {code.style.display none})/script/body例子 随机点名 stylediv {width: 200px;height: 40px;border: 2px solid brown;text-align: center;line-height: 40px;}button {margin-left: 65px;}/style/headbodydiv/divbuttonclick this/buttonscriptlet box document.querySelector(div)let btn document.querySelector(button)function getRandom(min, max) {return Math.floor(Math.random() * (max - min 1)) min}let arr [张三, 李四, 王五, 王朝, 马汉]btn.addEventListener(click, function () {let random getRandom(0, arr.length - 1)box.innerHTML arr[random]})/script/body例子 随机点名完善 stylediv {width: 200px;height: 40px;border: 5px solid brown;text-align: center;line-height: 40px;}button {margin-left: 65px;}/style/headbodydiv点击下面按钮开始抽人/divbuttonclick this/buttonscriptlet box document.querySelector(div)let btn document.querySelector(button)function getRandom(min, max) {return Math.floor(Math.random() * (max - min 1)) min}let arr [张三, 李四, 王五, 王朝, 马汉]btn.addEventListener(click, function () {let random getRandom(0, arr.length - 1)box.innerHTML arr[random]//抽过的就删除arr.splice(random, 1)//抽完按钮就禁用数组最后一个就禁用if (arr.length 0) {btn.disabled truebtn.innerHTML所有人都已经抽过了}})/script/body事件类型鼠标事件鼠标触发click 鼠标点击mouseover鼠标经过mouseleave鼠标离开焦点事件表单获得光标focus获得焦点blur失去焦点键盘事件键盘触发KeyDown键盘按下触发keyup键盘抬起触发文本事件表单输入触发input用户输入事件例子 小米搜索框 style* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;}.mi .search {border: 5px 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/headbodydiv classmiinput typesearch placeholder小米笔记本 /ul classresult-listlia href#全部商品/a/lilia href#小米11/a/lilia href#小米10S/a/lilia href#小米笔记本/a/lilia href#小米手机/a/lilia href#黑鲨4/a/lilia href#空调/a/li/ul/divscript//1获取元素inputlet search document.querySelector(input)//2获取元素.result-listlet list document.querySelector(.result-list)//3事件监听获得光标事件search.addEventListener(focus, function () {//显示下拉菜单list.style.display block//文本框变色search.classList.add(search)})/script/body例子 输入文字计算用户输入的字数 bodydiv classwdiv classcontrolsimg srcimages/tip.png alt /br /textareaplaceholder说点什么吧...idareacols30rows10maxlength200/textareadivspan classuseCount0/spanspan//spanspan200/spanbutton idsend发布/button/div/divdiv classcontentListul/ul/div/divscript//1获取元素文本域arealet area document.querySelector(#area)//2获取字符长度usecountlet useCount document.querySelector(.useCount)//3监听绑定事件用户输入的inputarea.addEventListener(input, function () {useCount.innerHTML area.value.length})/script/body例子 全选文本 style* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px 微软雅黑;color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}/style/headbodytabletrth classallCheckinput typecheckbox name idcheckAll /span classall全选/span/thth商品/thth商家/thth价格/th/trtrtdinput typecheckbox namecheck classck //tdtd小米手机/tdtd小米/tdtd1999/td/trtrtdinput typecheckbox namecheck classck //tdtd小米净水器/tdtd小米/tdtd4999/td/trtrtdinput typecheckbox namecheck classck //tdtd小米电视/tdtd小米/tdtd5999/td/tr/tablescript//let all document.querySelector(#checkAll)//let cks document.querySelectorAll(.ck)//let span document.querySelector(span)//点全选按钮下面的小按钮都选上all.addEventListener(click, function () {for (let i 0; i cks.length; i) {cks[i].checked all.checked}//如果点击全选了全选文字就变成取消没有点击就是全选if (all.checked true) {span.innerHTML 取消} else {span.innerHTML 全选}})//点击下面小按钮全选按钮被选for (let i 0; i cks.length; i) {cks[i].addEventListener(click, function () {for (let j 0; j cks.length; j) {if (cks[j].checked false) {all.checked falsereturn}}//all.checked true})}/script/body例子 购物车加减操作 stylediv {width: 80px;}input[typetext] {width: 50px;height: 44px;outline: none;border: 1px solid #ccc;text-align: center;border-right: 0;}input[typebutton] {height: 24px;width: 22px;cursor: pointer;}input {float: left;border: 1px solid #ccc;}/style
/headbodydivinput typetext idtotal value1 readonlyinput typebutton value idaddinput typebutton value- idreduce disabledscript// 1. 获取元素 三个let total document.querySelector(#total)let add document.querySelector(#add)let reduce document.querySelector(#reduce)// 2. 点击加号 事件侦听 add.addEventListener(click, function () {// console.log(typeof total.value)// total.value total.value 1// i 隐式转换// i i 1 total.valuereduce.disabled false})// 3. 点击减号 事件侦听 reduce.addEventListener(click, function () {total.value--if (total.value 1) {reduce.disabled true}})/script/div
/body
