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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
Zend公司全球首推PHP认证
2006/10/09 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
农历与西历对照
2006/09/06 Javascript
JS宝典学习笔记(下)
2007/01/10 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
详解JS函数防抖
2020/06/05 Javascript
浅谈python中的变量默认是什么类型
2016/09/11 Python
python模拟事件触发机制详解
2018/01/19 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python得到单词模式的示例
2018/10/15 Python
通过实例解析Python return运行原理
2020/03/04 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
中英文自我评价常用句型
2013/12/19 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
服务员态度差检讨书
2014/10/28 职场文书
城管个人总结
2015/02/28 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书