JavaScript中的核心事件类型解析

发表时间: 2024-03-24 20:08

事件的类型：

鼠标事件：

click 单击鼠标左键时触发

dblclick 双击鼠标左键时触发

mousedown 单击任意一个鼠标按键时触发

mouseup 松开鼠标任意一个按键时触发

mouseover 指针指针到另一个元素上时触发

mouseout 鼠标指针在某个元素上，移出该元素边界时触发

mousemove 鼠标指针在某个元素上移动时持续触发

<html><head><title>鼠标事件</title><script language="javascript">function handle(oEvent){if(window.event) oEvent = window.event; //处理兼容性，获得事件对象var oDiv = document.getElementById("display");oDiv.innerHTML += oEvent.type + "<br>"; //输出事件名称}window.onload = function(){var oImg = document.getElementsByTagName("img")[0];oImg.onmousedown = handle; //将鼠标事件除了mousemove外都监听oImg.onmouseup = handle;oImg.onmouseover = handle;oImg.onmouseout = handle;oImg.onclick = handle;oImg.ondblclick = handle;}</script></head><body><img src="03.jpg" border="0" style="float:left; padding:0px 8px 0px 0px;"><div id="display"></div></body></html>

以上代码将除了mousemove外的所有鼠标事件都予以监听,这样便可以很清楚地看到鼠标在图片上的动作所触发的一系列事件。

例如单击鼠标左键会先触发mousedown，然后是mouseup，最后才是常用的click事件；

而如果是双击鼠标左键，两类浏览器又再次发生了区别，标准的DOM浏览器会按照mousedown->mouseup->click->mousedown->mouseup->click->dblcilick

的顺序触发,即两次单击合成一次双击。

而双击事件在IE8浏览器中的触发顺序为mousedown->mouseup->click->mouseup->dblclick,即一次单击紧接着mouseup,然后判断为双击;

注意:对应旧版的浏览器,对于鼠标事件的触发,如果编程时需要涉及双击事件,应当尽量避免使用它的触发过程,原因就在于两类浏览器的不同;

IE9以上浏览器已经与标准的DOM结果一致;

鼠标button属性

button属性及其不同浏览器中的键值

button IE中的按键 Firefox中的按键

0 未按下案件左键

1 左键中键(滑轮)

2 右键右键

3 同时按下左、右键不支持组合键，未按下任何键时button值为undefined

4 中键(滑轮)

5 同时按下左、中键

6 同时按下右、中键

7 同时按下左、中、右键

输出鼠标事件button属性的值

<html><head><title>button属性</title><script language="javascript">function TestClick(oEvent){var oDiv = document.getElementById("display");if(window.event)oEvent = window.event;oDiv.innerHTML += oEvent.button; //输出button的值}document.onmousedown = TestClick;window.onload = TestClick; //测试未按下任何键/*以上语句也可写成：window.onload = function(){document.onmousedown = TestClick;}*/</script></head><body><div id="display"></div></body></html>

which属性判断鼠标键

<button id="btn"><mark>鼠标事件</mark>>是哪一个键</button><script type="text/javascript">//which->判断按下的那个鼠标键 左1 中2 右3//mouse相关的都是鼠标事件btn.onmousedown = function(e){//事件对象兼容处理var ev = e || window.event;switch (ev.which){case 1:console.log("你按下的是左键");break;case 2:console.log("你按下的是滚轮键");break;case 3:console.log("你按下的是右键");break;case 4:console.log("你按下的是左侧键上");break;case 5:console.log("你按下的是左侧键下");break;default:console.log("你的键我没有");break;}}</script>

键盘事件：

onkeydown 某个键盘按键被按下，一直按住某键则会持续触发

onkeypress 某个键盘按键被按下并松开,忽略shift alt ctrl等键

onkeyup 某个键盘按键被松开。

实例：控制键盘事件

<html><head><title>键盘事件</title><script language="javascript">function handle(oEvent){if(window.event) oEvent = window.event; //处理兼容性，获得事件对象var oDiv = document.getElementById("display");oDiv.innerHTML += oEvent.type + "  "; //输出事件名称}window.onload = function(){var oTextArea = document.getElementsByTagName("textarea")[0];oTextArea.onkeydown = handle; //监听所有键盘事件oTextArea.onkeyup = handle;oTextArea.onkeypress = handle;}</script></head><body><textarea rows="4" cols="50"></textarea><div id="display"></div></body></html>

上述代码触发的顺序为keydown->keypress->keyup,IE7和Firefox中运行效果是相同的;

对于键盘事件而言,最重要的并不是事件的名称,而是所按的是什么键,由于IE浏览器没有charCode属性,而keyCode只有在keydown、keyup事件发生时才与

标准的DOM的keyCode相同，在keypress事件中等同于charCode，因此常采用如下方法。

if(window.event){oEvent = window.event; //处理兼容性，获得事件对象//设置IE的charCode值oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;}

注意:上述代码采用keypress事件,并做出了兼容性写法来确保浏览器的兼容性;在keypress事件下charCode和keyCode的Unicode值是相同的;

而且也能区分大小写(A和a)(此代码在onkeypress事件下,使用charCode属性能兼容所有的浏览器)

backspace 8

空格 32

回车 13

左上右下 37 38 39 40

实例：键盘事件的相关属性

<html><head><title>键盘事件</title><script language="javascript">function handle(oEvent){if(window.event){oEvent = window.event; //处理兼容性，获得事件对象//设置IE的charCode值oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;}var oDiv = document.getElementById("display");//输出测试oDiv.innerHTML += oEvent.type + ": charCode:" + oEvent.charCode + " keyCode:" + oEvent.keyCode + "<br>";}window.onload = function(){var oTextArea = document.getElementsByTagName("textarea")[0];oTextArea.onkeypress = handle; //采用onkeypress区分按键的Unicode,则charCode和keyCode值是相同的，又能够区分大小写(a和A)oTextArea.onkeydown = handle; // charCode和keyCode值就不相同,而keycode兼容多种浏览器,但不能区分大小写a和A}</script></head><body><textarea rows="4" cols="50"></textarea><div id="display"></div></body></html>

注意:上述代码采用keypress事件,并做出了兼容性写法来确保浏览器的兼容性;在keypress事件下charCode和keyCode的Unicode值是相同的;

而且也能区分大小写(A和a)(此代码在onkeypress事件下,使用charCode属性能兼容所有的浏览器)

keycode和charcode比较,keycode虽然能兼容多种浏览器,但不能区分大小写(a和A)

实例: 打印机事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>文字打印</title><style type="text/css">*{margin: 0;padding: 0;}body{text-align: center;}div{width: 400px;height: 200px;text-align: left;margin: 20px auto;border: 1px solid red;}input{width: 400px;height: 36px;outline: none;padding-left: 3px;box-sizing: border-box;}</style></head><body><div></div><input type="text" placeholder="文字待输入区域···" /><script type="text/javascript">var timer = null;var index = 0;var oInput = document.getElementsByTagName("input")[0];var oDiv = document.getElementsByTagName("div")[0];oInput.onkeydown = function(ev) {var eEvent = ev || window.event;if (eEvent.keyCode == 13) { //回车键var txt = oInput.value;timer = setInterval(function() {if (txt.length == index - 1) {clearInterval(timer);} else {oDiv.innerText = txt.substring(0, index++) + '_';txt.value = ""}}, 400)}};</script></body></html>

HTML事件：

onreset 重置按钮被点击。

onresize 窗口或框架被重新调整大小。

onselect 文本被选中。

onsubmit 确认按钮被点击。

onunload 用户退出页面。

onload 一张页面或一幅图像完成加载。

onerror 在加载文档或图像时发生错误。

onfocus 元素获得焦点。

onabort 图像的加载被中断。

onblur 元素失去焦点。

onchange 域的内容被改变。

载入事件load是最常用的事件之一,因为在页面载入之前,DOM的框架还没有搭建完毕,因此任何相关操作都不能发生。

给window对象分配load、unload事件等同于<body>标记的onload、onunload方法，即：

<script language="javascript">window.onload=function(){alert("Page Loaded");}</script>

等同于:<body onload="alert('Page Loaded');">

a标签点击事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--<a href="javascript:;">点我呀</a>--><!--<a href="javascript: return;">点我呀</a>--><a href="javascript: void(0);">点我呀</a><script type="text/javascript">var a = document.getElementsByTagName("a")[0];a.onclick = function(){console.log("hello world");}</script></body></html>

你会发现我们执行的语句hello world会在控制台一闪而过, 因为a本身具有跳转功能, 所以你会看到刚刚的效果。

①<a href="javascript:;">点我呀</a>

②<a href="javascript: void(0);">点我呀</a>

③<a href="javascript: return;">点我呀</a>

JavaScript中的核心事件类型解析

热门阅读

推荐阅读