JS创建事件的三种方法(实例代码)

2019-11-20 10:05:45

字体：大中小

来源：转载

供稿：网友

1.普通的定义方式

<input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 ');if(Sfont=='红色'){　　　　form1.style.fontFamily='黑体';　　　　form1.style.color='red';}"/>

这是最常见的一种定义方式，直接将JS事件定义在需要的对象之上。相关的变形就是调用方法的形式，如下

<script>  function show()    {      alert("show");    }</script><input type="button" name="show" onclick="show()"/>

第二种

<script type="text/javascript" for="window" event="onload">  alert("Welcome!");</script><script type="text/javascript" for="window" event="onunload">  alert("Thanks!");</script>

这里定义了加载窗口和卸载窗口时的发生的操作。

如果是针对其他对象的事件，只需要修改for属性的值为对象名，event修改为监视的的事件。如下：

<script type="text/javascript" for="test" event="onclick">alert("button!");</script>

第三种：

<input type="button" name="test" value="test"/><script>function te(){  alert("test");}test.onclick=te;</script>

这里我们使用注册的形式，将方法注册到指定对象的指定事件。使用对象名来调用。

完整测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><script type="text/javascript" for="window" event="onload">alert("Welcome!");</script><script type="text/javascript" for="window" event="onunload">alert("Thanks!");</script><form name="form1" method="post" action="">JS很好学</form><formn ame="form2" method="post" action=""><input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 ');if(Sfont=='红色'){form1.style.fontFamily='黑体';form1.style.color='red';}"/><input type="button" name="test" value="test"/><script>function te(){alert("test");}test.onclick=te;</script></form></body></html>

以上这篇JS创建事件的三种方法(实例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：Bootstrap3制作图片轮播效果

下一篇：jQuery判断checkbox选中状态