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>

记录下来，巩固知识，同时方便他人。

可以联系我进行交流，renhanlinbsl@163.com.

2016.5.11

13:52

JS创建事件的三种方式（实例）的更多相关文章

  1. Java并发编程：Java创建线程的三种方式

    目录 引言 创建线程的三种方式 一.继承Thread类 二.实现Runnable接口 三.使用Callable和Future创建线程 三种方式的对比 引言 在日常开发工作中,多线程开发可以说是必备技能 ...

  2. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  3. js声明变量的三种方式

    JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用 正确用法: <script type="text/javascript"> ...

  4. 0036 Java学习笔记-多线程-创建线程的三种方式

    创建线程 创建线程的三种方式: 继承java.lang.Thread 实现java.lang.Runnable接口 实现java.util.concurrent.Callable接口 所有的线程对象都 ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. spring创建bean的三种方式

    spring创建bean的三种方式: 1通过构造方法创建bean(最常用) 1.1 spring默认会通过无参构造方法来创建bean,如果xml文件是这样配置,则实体类中必须要有无参构造方法,无参构造 ...

  7. java创建线程的三种方式及其对比

    第一种方法:继承Thread类,重写run()方法,run()方法代表线程要执行的任务.第二种方法:实现Runnable接口,重写run()方法,run()方法代表线程要执行的任务.第三种方法:实现c ...

  8. AJPFX总结java创建线程的三种方式及其对比

    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...

  9. java创建线程的三种方式及其对照

    Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类.并重写该类的run方法,该run方法的方法体就代表了线程要完毕的任务.因此把run()方法称为运行 ...

随机推荐

  1. [Jsoi2013]快乐的jyy

    题目 这个需要我们瞎\(yy\)一下就能做了 我们先对于第一个串建立\(PAM\) 我们把第二个串丢上去匹配,这里匹配出来的是以每一个位置为结尾且在另一个串里存在的最长回文后缀的长度 对于每一个位置开 ...

  2. window10+linux双系统安装

    参考教程 安装Windos U盘制作 启动UltraISO,点击“文件”菜单下的“打开”按钮,打开已准备好的ISO镜像文件,如JINHU_SYSTEM_TOOL_2009.iso 刻录U盘过程.点击菜 ...

  3. python3 day02 大纲

    一. 格式化输出 %s 字符串的占位 %d 数字的占位 digit %f 浮点数 字符串 % (数据) 模板字符串(3.5) # username = "admin"# passw ...

  4. PAT A1073 Scientific Notation （20 分）——字符串转数字

    Scientific notation is the way that scientists easily handle very large numbers or very small number ...

  5. node中npm安装模块的网络问题

    最近使用node开发时,发现所有的依赖模块都安装不了啦,一直报错如下 rollbackFailedOptional: verb npm-session 5a4a66a1b8d06dc3 后来才发现是由 ...

  6. Android学习之基础知识四-Activity活动1讲

    一.活动(Activity)的基本用法: 1.手动创建活动FirstActivity(java源码): A.Android Studio在一个工作区间只允许打开一个项目,点击:File--->C ...

  7. java 转换流 打印流 数据流

    转换流 InputStreamReader 和 OutputStreamWriter处理流用于将字节流转化成字符流,字符流与字节流之间的桥梁InputStreamReader 的作用是把 InputS ...

  8. 学习CSS布局 - 没有布局

    如果你只想把所有内容都塞进一栏里,那么不用设置任何布局也是OK的. 然而,如果用户把浏览器窗口调整的很大,这时阅读网页会非常难受: 读完每一行之后,你的视觉焦点要从右到左移动一大段距离. 试着调整下浏 ...

  9. 【转】JS中，中国标准时间转化为yyyy-MM-dd

    'Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)'--此格式日期无法传到java后台,须格式化,方法如下 var d = new Date('Thu May 12 ...

  10. cp 命令有坑

    cp 是个很常用的命令, 基本语法为  cp -v  a   b  把文件a 复制为文件b(-v为显示做了什么,这是非常安全的做法,建议新手添加此参数) 参数说明: -a:此选项通常在复制目录时使用, ...