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 动态加载脚本的4种方法
May 05 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
javaScript基础语法介绍
Feb 28 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
Angular中$compile源码分析
Jan 28 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
Vue实现验证码功能
Dec 03 Javascript
JavaScript组合继承详解
Nov 07 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运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
python文件特定行插入和替换实例详解
2017/07/12 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Django stark组件使用及原理详解
2019/08/22 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
餐饮业创业计划书范文
2014/01/06 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
乔迁之喜主持词
2014/03/27 职场文书
减负增效提质方案
2014/05/23 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
服务明星事迹材料
2014/12/29 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
python实现简单倒计时功能
2021/04/21 Python
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle
基于redis+lua进行限流的方法
2022/07/23 Redis