带你走进从零认识JavaScript到精髓(十八)JavaScript的事件event对象(中)
2021/11/20 9:39:59
本文主要是介绍带你走进从零认识JavaScript到精髓(十八)JavaScript的事件event对象(中),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、 Event事件类型
事件对象也存在一定的兼容性问题,在IE8及以前本版之中,通过设置属性注册事件处理程序时,调用的时候并未传递事件对象,需要通过全局对象window.event来获取。解决方法如下:
function getEvent(event) { event = event || window.event; }
在IE浏览器上面是event事件是没有preventDefault()这个属性的,所以在IE上,我们需要设置的属性是returnValue
window.event.returnValue=false
stopPropagation()也是,所以需要设置cancelBubble,cancelBubble是IE事件对象的一个属性,设置这个属性为true能阻止事件进一步传播。
event.cancelBubble = true
1.2 UI事件
load // 页面完全加载完成后,立即执行
unload // 事件在用户退出时发生
resize // 事件在窗口或框架被调整大小时发生
scroll // 用户滚动滚动条的元素中的内容时,在元素上触发
1.3 表单点击事件
blur // 失去焦点
<html> <head> <script type="text/javascript"> function setFocus() { document.getElementById('text1').focus() } function loseFocus() { document.getElementById('text1').blur() } </script> </head> <body> <form> <input type="text" id="text1" /> <br /> <input type="button" onclick="setFocus()" value="Set focus" /> <input type="button" onclick="loseFocus()" value="Lose focus" /> </form> </body> </html>
focus // 获得焦点
select // 文本被选中
change // 内容改变时
submit // 点击提交按钮触发
<html> <head> <script type="text/javascript"> function formSubmit(){ document.getElementById("myForm").submit() } </script> </head> <body> <form id="myForm" action="js_form_action.asp" method="get"> Firstname: <input type="text" name="firstname" size="20"><br /> Lastname: <input type="text" name="lastname" size="20"><br /> <br /> <input type="button" onclick="formSubmit()" value="Submit"> </form> </body> </html>
reset // 点击重置按钮触发
<html> <head> <script type="text/javascript"> function formReset(){ document.getElementById("myForm").reset() } </script> </head> <body> <p>在下面的文本框中输入一些文本,然后点击重置按钮就可以重置表单。</p> <form id="myForm"> 姓名:<input type="text" size="20"><br /> 年龄:<input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="重置"> </form> </body> </html>
1.4 鼠标事件
onclick: // 用户单击鼠标按钮或按下回车键时触发
onmouseover: // 当鼠标移到某个元素上方时触发
onmouseout: // 当鼠标移出某个元素上方时触发
onmousemove: // 当鼠标指针在元素上移动时触发
onmouseenter : // 当鼠标移动到元素上方(子元素不支持冒泡)
onmouseleave : // 鼠标离开元素(子元素不支持冒泡)
ondblclick: // 当用户双击主鼠标按钮时触发
onmousedown: // 当用户按下鼠标还未弹起时触发
onmouseup: // 当用户释放鼠标按钮时触发
1.5 键盘事件
keydown // 键盘按下任意键
keypress // 键盘按下字符键
keyup // 释放键盘上的键
键盘事件
onkeydown:当用户按下键盘上任意键(功能键除外)触发,如果按住不放,会重复触发。
onkeypress:当用户按下键盘上的ascii码字符键触发,如果按住不放,会重复触发onkeyup:当用户释放键盘上的键触发
总结
以上就是今天带你走进从零认识JavaScript到精髓(十八)JavaScript的事件event对象(中) 会持续更新中… 原创不易,期待您的点赞关注与转发评论
这篇关于带你走进从零认识JavaScript到精髓(十八)JavaScript的事件event对象(中)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南