javascript事件的注册方式总结
在工作一年之后发现很多平常为了解决问题去查询百度获得到的知识点,在几天或是几周之后就会很容易遗忘。为了将凌散的知识点归集起来需要系统的学习,在脑海中建立起架构。最近在系统的学习javascript,为此我买了一本《javascript权威指南》来系统的学习,现在打算在学习的过程中记录一些笔记用来达到巩固的效果。今天记录的是javascript中的事件处理。
首先学习一件新鲜的事情物可以从起定义着手,搞清楚是什么,再知道怎么用。由浅入深。废话不多说,操练起来。
javascript事件的定义:
在客户端javascript程序中采用了异步事件驱动编程模型。在这种程序设计风格下,当文档,浏览器,元素或与之相关的对象发生某些有趣的事情时,文本浏览器就会产生事件。
事件的类型:
依赖于设备的输入事件,如:mousedown,mouseover等。
独立于设备的输入事件,如:尚未广泛实现 textinput事件就是一个独立于设备的输入事件,他既可以取代按键事件并支持键盘的输入,也可以替代剪切和黏贴与手写识别事件。
用户界面事件,通常是比价高级的事件,通常出现在定义问问吧应用用户界面的HTNL表的元素上,如;
focus,change事件。
状态变化事件,如:loadstart,progress等。
特定API事件,如:dragstart,dragenter等。
计时器和错误处理程序事件。如timer和error hangdler。
传统事件类型
表单事件:submit,reset,click,change,focus,blur。
Window事件:unload,load,beforeload,beforeunload,resize,scroll。
鼠标事件:click,mousedown,mouseover,mousemove,mouseup,
键盘事件:keypress,keydown,keyup。
DOM事件:
3级DOM事件规范标准化了不冒泡的focusein和focuseout事件来取代冒泡的focusheblur事件,标准化了冒泡的mouseenter和mouseleave事件来取代不冒泡的mouseover和mouseout事件。
HTML5事件
html5定义了大量的新的web应用API,如:<audio>和<video>元素。
触摸屏和移动设备事件
注册事件处理程序
(1)设置javascript对象属性为事件处理程序,如:
<script> window.onload = function () { var elt = document.getElementById("address"); elt.onsubmit = function () { return this; }; } </script>
(2)设置HTML标签属性为事件处理程序:如:
<button onclick="alert('Thank you')">点击这里</button>
(3)使用addEventListener(),该属性不会影响onclick属性的值,而且可以重复添加一系列的事件。
如;
<button id="btn"> click me</button>
<script>
var b = document.getElementById('btn');
b.onclick = function () {
alert('click me')
};
b.addEventListener('click', function () {
alert("Thank you!");
})
b.addEventListener('click', function () {
alert("You are welcome!");
})
</script>
以上的代码中会依次弹出 “click me”,”Thank you!“,“You are welcome!”,那我们该如何注销事件呢,其实可以用removeEventListener函数来注销。
如下代码:
<button id="btn"> click me</button>
<script>
var ChangeColor = function () {
this.style.background = 'red';
}
var b = document.getElementById('btn');
b.addEventListener('mouseover', ChangeColor)
b.addEventListener('click', function () {
alert("Thank you!");
})
b.addEventListener('click', function () {
this.style.background = 'yellow';
alert("You are welcome!");
})
b.onclick = function () {
this.removeEventListener('mouseover', ChangeColor);
alert('click me');
};
</script>
鼠标第一次经过按钮的时候按钮的背景色改为红色,当点击按钮后再弹出You are welcome! 之后按钮的背景色也改为看黄色,并注销了该按钮的鼠标悬浮事件,第二次悬停在按钮上的时候按钮的背景色依旧是黄色。
(4)attachEvent()
IE9之前不支持addEventListener()和removeEventListener()
但是在IE5之后定义了类似的方法attachEvent()和detachEvent()
<button id="btn"> click me</button> <script> var ChangeColor = function () { this.style.background = 'red'; } var b = document.getElementById('btn'); b.attachEvent('mouseover', ChangeColor) b.attachEvent('click', function () { alert("Thank you!"); }) b.attachEvent('click', function () { this.style.background = 'yellow'; alert("You are welcome!"); }) b.onclick = function () { this.detachEvent('mouseover', ChangeColor); alert('click me'); }; </script>
总结:
共三种调用方式,标签的属性注册方式相对方便但把js和html 混在一起不利于后期维护,并暴露了方法名称,不够安全。对象属性注册的方式相对隐秘,但不能重复注册多个事件在一个元素上会导致之前的事件被最新的事件给覆盖。使用addEventListener()或者attachEvent()方法可以注册多个方法在事件上面相对其他两个在注册环节上显的先对复杂。
具体使用那个方式来注册事件还是要根据具体的业务环境来选择。
本文来自博客园,作者:七分暖,转载请注明原文链接:https://www.cnblogs.com/lin494910940/p/11332038.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签