如何在鼠标点击时调用JavaScript函数

时间:2019-05-19 01:25:36  来源:igfitidea点击:

JavaScript是网站上使用的核心编程语言之一。
JavaScript支持交互式web页面,是web应用程序的重要组成部分。
大多数现代网站都依赖JavaScript来处理客户端应用程序的行为。
所有的web浏览器都有一个专用的JavaScript引擎来执行它。
在本教程中,我们将学习如何在各种页面事件(如单击、表单提交或其他各种HTML控件)上调用JavaScript函数。

创建JavaScript函数

首先,创建一个在本教程中进一步使用的JavaScript函数。
我们也可以在单独的JavaScript文件下创建函数,并包含在HTML页面中。

<script type="text/javascript">
  function myFunction() {
	var dt = new Date();
	alert(dt);
}
</script>

上面的函数将在弹出窗口中打印当前日期时间。
让我们在各种HTML控件的单击事件上调用这个函数。
这些HTML控件需要放在网页标签下。

1. 在超链接单击时调用JavaScript

在正文部分添加下面的HREF html代码并访问web浏览器。
现在只需单击link,它将执行JavaScript的myFunction,它将显示当前日期,如上所述。

<a href="javascript:void(0);" onclick="myFunction();"> click here </a>

2. 在表单提交时调用JavaScript

接下来,创建一个示例表单来调用表单提交事件的JavaScript函数。
这对于验证表单输入值然后提交非常有用。

<form id="myForm" method="post">
     Name:    <input name="name" id="name" type="text" /><br />
    <input type="button" id="form1" onclick="myFunction();" value="Submit" />
</form>

3. 单击按钮时调用JavaScript

现在调用按钮点击事件的JavaScript函数。
在html页面的主体标记之间添加以下代码。
这有助于检查表单值或验证表单值。

<button onclick="myFunction();">click here </button>

4. 调用JavaScript链接P标签

使用html“p”标签创建链接, 调用JavaScript函数。

<p id="demo" onclick="myFunction()">click here </p>