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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
动态加载jQuery的方法
Jun 16 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
微信小程序实现聊天室
Aug 21 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python的randrange()方法使用教程
2015/05/15 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
python进度条显示之tqmd模块
2020/08/22 Python
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
岗位职责的构建方法
2014/02/01 职场文书
买房协议书范本
2014/10/23 职场文书
综治维稳工作汇报
2014/10/27 职场文书
教师求职自荐信范文
2015/03/04 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript