咨询热线:15811653920

2009-2017

我们一直走在国际设计的前沿,追求与研究从未停止

我的位置:首页 > 学院 > php教程

html5与javascript如何进行交互

JavaScript语言是目前很多框架的基础,比如jQuery,React,Vue等等,而JS本身就是一种直译式的脚本语言,作为前端语言的三驾马车,拥有不可撼动的历史地位。而JavaScript与HTML5也是可以进行交互。接下来就来和大家聊聊JavaScript与HTML5如何交互。

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

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

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

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

onclick事件类型:

这是当用户点击鼠标左键时发生的最频繁使用的事件类型。可以针对此事件类型把验证信息,警告等显示。

例子:

<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>

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

想了解更多,请访问齐创互联,需要网站建设,浏览快速建站模板快速建站
点击在线客服联系客服,联系电话:15811653920 联系人: 丁生.


感谢您关注我们,如果您有建站需求,请与我们取得联系。
扫一扫上面的二维码图案,加我微信
扫一扫上面的二维码图案,加我微信
咨询直线:15811653920 丁生

建站模板

Web Templates

建站龙头,低价保证,贴心服务

权威认证建站龙头企业,合理定价,实现与客户的长期合作,30万家企业级用户优选!