信鸽网

浅析JavaScript中的事件机制

  作者：bea

事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理。 当页面加载，这是一个事件。当用户点击一个按钮，这一下，也就是一个事件。事件的另一个例子是类似按下任意键，关闭窗口，调整窗口等。 开发者可以使用这些事件执行JavaScript编码响应，这引起按钮以关闭视窗，消息，以便显示给用户，要验证的数据，以及几乎任何其它类型的响应可以发生的。 事件是文档对象模型(DOM)第3级，每一个HTML元素的一部分有一套可以触发JavaScript

 事件是什么 ?


JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理。


当页面加载，这是一个事件。当用户点击一个按钮，这一下，也就是一个事件。事件的另一个例子是类似按下任意键，关闭窗口，调整窗口等。


开发者可以使用这些事件执行JavaScript编码响应，这引起按钮以关闭视窗，消息，以便显示给用户，要验证的数据，以及几乎任何其它类型的响应可以发生的。


事件是文档对象模型(DOM)第3级，每一个HTML元素的一部分有一套可以触发JavaScript代码事件。


例子：




<html>

<head>

<script type="text/javascript">

<!--

function sayHello() {

  alert("Hello World")

}

//-->

</script>

</head>

<body>

<input type="button" onclick="sayHello()" value="Say Hello" />

</body>

</html>


这将产生以下结果，当你点击“Hello”按钮，然后会的onclick事件的发生将触发sayHello()函数。



 
onsubmit 事件类型：


另一个最重要的事件类型是 onsubmit。当尝试提交表单时引发此事件。所以，可以把表单验证针对此事件类型。


下面是简单的例子，说明它的用法。在这里，我们提交表单数据到Web服务器之前，调用一个validate()函数。如果表单将被提交的validate()函数返回true，否则不会提交数据。
例子：




<html>

<head>

<script type="text/javascript">

<!--

function validation() {

  all validation goes here

  .........

  return either true or false

}

//-->

</script>

</head>

<body>

<form method="POST" action="t.cgi" onsubmit="return validate()">

.......

<input type="submit" value="Submit" />

</form>

</body>

</html>


onmouseover 和 onmouseout:


这两个事件类型将帮助创建图片甚至用文字以及不错的效果。当把鼠标在任何元素，当从元素把鼠标移出发生onmouseout事件，移过时发生 onmouseover 事件。
例子：


下面的例子说明，分组反应如下：




<html>

<head>

<script type="text/javascript">

<!--

function over() {

  alert("Mouse Over");

}

function out() {

  alert("Mouse Out");

}

//-->

</script>

</head>

<body>

<div onmouseover="over()" onmouseout="out()">

<h2> This is inside the division </h2>

</div>

</body>

</html>


 


可以使用这两个事件类型改变不同的图像，也可以创建帮助你的用户。
HTML 4 标准事件


标准的HTML4事件列在这里，供大家参考。下面的脚本显示一个Javascript函数功能以对该事件执行。





有用  |  无用

猜你喜欢

您可能感兴趣的文章: