javascript事件简介

最新推荐文章于 2022-12-13 17:43:21 发布

鸭脖

最新推荐文章于 2022-12-13 17:43:21 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript&CSS 文章标签： javascript input image function ie 语言

本文链接：https://blog.youkuaiyun.com/Yelbosh/article/details/7582874

Javascript&CSS 专栏收录该内容

22 篇文章

订阅专栏

本文深入解析JavaScript中的onabort、onerror、onload、onunload、onblur、onfocus、onchange、onclick、ondblclick、onkeydown、onkeyup、onkeypress等关键事件，通过实例代码演示其应用。

javascript事件无疑是javascript语言的典型特征之一，下面我们逐个一一进行讨论并且举例说明

1、onabort事件，onerror事件以及onload事件以及onunload事件

第一个用于img标签，后两个用于页面以及图像的加载，分别为加载失败和加载成功的时候所触发的事件

如果图像的加载被中断，那么会触发改事件

代码：

<html>
<head>
<script type="text/javascript">
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>

<body>
<img src="image_w3default.gif" onabort="abortImage()" />
</body>

</html>

2、onblur事件与onfocus事件

blur的意思是模糊的意思，该事件是在页面元素失去焦点的时候被触发的。大部分的页面元素都可以用来触发该事件。有的人可能不明白失去焦点的含义，其实就是按下鼠标或者键盘上的tab键时将焦点转移到其他对象或者页面，相反的是，focus是集中的意思，也就是元素获得用户焦点时所触发的事件

代码：

<html>
<head>
<meta charset="Utf-8">
   <script type="text/javascript">
   function upperCase()
   {
   var x=document.getElementById("fname").value
   document.getElementById("fname").value=x.toUpperCase()
   }
   </script>
</head>

<body>

输入您的姓名：
<input type="text" id="fname" οnblur="upperCase()" />

</body>
</html>

3、onchange事件

当输入域的内容改变的时候会触发该事件

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>

<body>

输入您的姓名：
<input type="text" id="fname" onchange="upperCase(this.id)" />

</body>
</html>

4、onclick与ondbclick

含义分别为当用户单击和双击某元素的时候所触发的事件

<html>
<body>

Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
双击下面的按钮，把 Field1 的内容拷贝到 Field2 中：
<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>

</body>
</html>

5、有关键盘按键的事件，分别为onkeydown事件，onkeyup事件和onkeypress事件

含义分别为当按键按下和按键起来以及按键按下松开

ie是window.event,其他为event.which.chrome两者都是支持的

<html>
<body>
<script type="text/javascript">
function noNumbers(e)
{
var keynum
var keychar
var numcheck

if(window.event) // IE
  {
  keynum = e.keyCode
  }
else if(e.which) // Netscape/Firefox/Opera
  {
  keynum = e.which
  }

keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>

<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>

</html>

6、onmousedown事件、onmousemove事件，onmouseout事件，onmouseover事件，onmouseup事件，有关mouse的事件

顾名思义

7、onsubmit事件

提交按钮被按下的事件