学校部门网站建设,大型网站的制作,一般做网站费用,网站策划怎么样说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 事件监听 onxxxx属性✨ 常见的鼠标事件监听✨ 常见的键盘事件监听✨ 常见的表单事件监听✨ 常见的页面事件监听 ⭐ 事件监听 DOM允许我们书写JavaScript代码以让HTML元素对事件作出反应 事件用户与网页的交互动作如当用户点击元素时、当鼠标移动到元素上时、当文本空的内容被改变时、当键盘在文本框中被按下时、当网页已加载完毕时。。。 监听让极端及随时能够发现这个事件从而执行程序员预先编写的一些程序 设置事件监听的方法主要有onxxxx和addEventListener()两种 onxxxx属性
设置onxxxx属性是最简单的设置事件监听的方法。比如onclick属性代表当鼠标单击事件。
示例代码
oBox.onclick function (){//点击盒子时将执行这里的语句
}举个例子点击盒子弹出一个alert:
代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box {width: 200px;height: 200px;background-color: #ccc;}/style
/head
bodydiv idbox/divscriptvar oBox document.getElementById(box);oBox.onclick function () {alert(点击盒子弹出这个弹框);}/script
/body
/html✨ 常见的鼠标事件监听
事件名事件描述onclick当鼠标单机某个对象ondblclick当鼠标双击某个对象onmousedown当某个鼠标按键在某个对象上被按下onmouseup当某个鼠标按键在某个对象上被松开onmousemove当某个鼠标按键在某个对象上被移动onmouseenter当鼠标进入某个对象相似事件onmouseoveronmouseleave当鼠标离开某个对象相似事件onmouseoutonmousewheel当鼠标滚轮滚动
一些鼠标事件监听的示例代码
oBox.onclick function () {console.log(鼠标单击);
}
oBox.ondblclick function () {console.log(鼠标双击);
}
oBox.onmousedown function () {console.log(鼠标按下);
}
oBox.onmouseup function () {console.log(鼠标松开);
}
oBox.onmousemove function () {console.log(鼠标移动);
}
oBox.onmouseenter function () {console.log(鼠标移入);
}
oBox.onmouseleave function () {console.log(鼠标移出);
}
oBox.onmousewheel function () {console.log(鼠标滚轮滚动);
}✨ 常见的键盘事件监听
事件名事件描述onkeypress当某个键盘的键被按下系统按钮如箭头键、退格键…和功能键如F1、F2…无法得到识别onkeydown当某个键盘的键被按下系统按钮和功能键可以识别并且会先于onkeypress发生onkeyup当某个键盘的键被松开
难点在于onkeypress和onkeydown的区别
一些键盘事件监听的示例代码
body姓名input typetext idnameFieldscriptvar nameField document.getElementById(nameField);nameField.onkeydown function () {console.log(键盘按钮被按下);};nameField.onkeypress function () {console.log(键盘按钮被按下不能识别箭头退格等);};nameField.onkeyup function () {console.log(键盘按钮松开);};/script
/body✨ 常见的表单事件监听
事件名事件描述onchange当用户改变了域的内容比如修改文本框的内容然后鼠标在空白处点击一下时会修改完成此时会触发该事件oninput当用户正在改变域的内容重点是正在非常类似onkeydown的功能onfocus当某元素获得焦点比如tab键或鼠标点击onblur当某元素失去焦点onsubmit当表单被提交onreset当表单被重置 先来了解一个扩展小知识——获取表单的dom节点 先通过访问元素的常见方法获取到这个表单再通过表单打点的方式获取到其中的子节点 示例代码
bodyform action idmyformp姓名input typetext namenameField/pp年龄input typetext nameageField/p/formscriptvar myform document.getElementById(myform); //先获取到这个表单var nameField myform.nameField; //再通过表单打点的方式获取到其中的子节点var ageField myform.ageField; //再通过表单打点的方式获取到其中的子节点/script
/body一些表单事件监听的示例
bodyform action idmyformp姓名input typetext namenameField/pp年龄input typetext nameageField/ppinput typesubmit namesubmitField/ppinput typereset nameresetField/p/formscriptvar myform document.getElementById(myform); //先获取到这个表单var nameField myform.nameField; //再通过表单打点的方式获取到其中的子节点var ageField myform.ageField; //再通过表单打点的方式获取到其中的子节点nameField.onchange function () {console.log(您修改了姓名);};nameField.oninput function () {console.log(您正在修改姓名);};ageField.onfocus function () {console.log(年龄文本框获得焦点);};ageField.onblur function () {console.log(年龄文本框失去焦点);};myform.onsubmit function () {alert(您的表单被提交);};myform.onreset function () {alert(您的表单被重置);};/script
/body✨ 常见的页面事件监听
onload当页面或图像被加载完成onunload当用户退出页面事件名事件描述
示例代码
window.onload function () {console.log(页面加载完成);
};
window.onunload function () {console.log(退出页面);
};更详细的页面事件监听在学到BOM时再介绍。
