您的位置是:网站首页>Javascript编程Javascript编程

《javascript-少儿编程》术语总结--JavaScript 事件【上】

少儿编程网2019-05-17 22:39:04Javascript编程 人已围观 来源: -用户投稿

简介我们之前提到过函数的调用。函数定义之后,默认是不会执行的,这时候就需要一些事件来触发这个函数的执行。

我们之前提到过函数的调用。函数定义之后,默认是不会执行的,这时候就需要一些事件来触发这个函数的执行。X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

JavaScript很多有很多事件,例如鼠标的点击、移动,网页的载入和关闭。我们先来定义一个函数,再看几个事件的实例。X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

统一的示例函数:X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<script type="text/JavaScript">X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

function displaymessage()X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

{X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

    alert("我是菜鸟我怕谁!");X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

}X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

</script>X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

函数很简单,只是显示一条消息。X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

1、点击事件X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

使用点击事件调用,需要给元素设置onclick属性。示例代码如下:X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<button value="点击提交" onclick="displaymessage()">onclick调用函数</button>X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

由于设置了onclick="displaymessage()",因此点击按钮则会调用函数。X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

窗体顶端X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

2、鼠标经过、移出事件X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

使用鼠标经过事件调用函数的代码如下:X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<button value="鼠标滑过" onmouseover="displaymessage()">鼠标滑过调用函数</button>X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

当鼠标经过按钮时,触发onmouseover事件,将会调用函数displaymessage()。X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

使用鼠标移出事件调用函数的代码如下:X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<button value="鼠标移出" onmouseout="displaymessage()">鼠标移出调用函数</button>X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

把鼠标移动到这个按钮里面,当再移动出去时,触发onmouseout 事件,将会调用函数displaymessage()。X4n少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

《javascript-少儿编程》术语总结--JavaScript 事件【上】

      匿名评论
    • 评论
    人参与,条评论
    《javascript-少儿编程》术语总结--JavaScript 事件【上】

微信公众号

免费视频教程

先知道