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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
js css自定义分页效果
2017/02/24 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
JQuery常见节点操作实例分析
2019/05/15 jQuery
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python搜索指定目录的方法
2015/04/29 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python如何从键盘获取输入实例
2020/06/18 Python
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
安踏广告词改编版
2014/03/21 职场文书
四议两公开实施方案
2014/03/28 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
学习党章心得体会2016
2016/01/15 职场文书
python在package下继续嵌套一个package
2022/04/14 Python