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


Posted in Javascript onMay 12, 2016

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创建事件的三种方法(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
javascript基础语法学习笔记
Jan 04 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
六行python代码的爱心曲线详解
2019/05/17 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
网络技术支持面试题
2013/04/22 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
执行总经理岗位职责
2014/02/03 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
房屋转让协议书
2014/10/18 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书