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中的call实现继承
Jan 22 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
vue-cli项目中使用Mockjs详解
May 14 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
微信小程序激励式视频广告组件使用详解
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
PHP 各种排序算法实现代码
2009/08/20 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
javascript与css3动画结合使用小结
2015/03/11 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
详解jquery和vue对比
2019/04/16 jQuery
Angular4.0动画操作实例详解
2019/05/10 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python字符串Intern机制详解
2019/07/01 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
django的ORM操作 增加和查询
2019/07/26 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
马智宇婚礼主持词
2014/03/22 职场文书
素质教育标语
2014/06/27 职场文书
个人债务授权委托书
2014/10/17 职场文书
统计员岗位职责范本
2015/04/14 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
Python如何配置环境变量详解
2021/05/18 Python
Python经常使用的一些内置函数
2022/04/11 Python