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压缩工具下载集合
Mar 06 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
JavaScript canvas实现文字时钟
Jan 10 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+MySql编写聊天室
2006/10/09 PHP
浅谈php自定义错误日志
2015/02/13 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
js+xml生成级联下拉框代码
2012/07/24 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
WxPython建立批量录入框窗口
2019/02/27 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
技校学生个人职业生涯规划范文
2014/03/03 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
食堂标语大全
2014/06/11 职场文书
初中同学会活动方案
2014/08/22 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
介绍长城的导游词
2015/01/30 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书