JS创建事件的三种方式(实例)

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>

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

可以联系我进行交流,[email protected].

2016.5.11

13:52

时间: 2024-11-07 12:20:05

JS创建事件的三种方式(实例)的相关文章

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

Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行体. (2)创建Thread子类的实例,即创建了线程对象. (3)调用线程对象的start()方法来启动该线程. package com.thread; public class FirstThreadTest extends Thread{ int i = 0; //重写run方法,run方法的方

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

Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类.并重写该类的run方法,该run方法的方法体就代表了线程要完毕的任务.因此把run()方法称为运行体. (2)创建Thread子类的实例,即创建了线程对象. (3)调用线程对象的start()方法来启动该线程. package com.thread; public class FirstThreadTest extends Thread{ int i = 0; //重写run方法.run方法的方

javascript中定义事件的三种方式

在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使用addEvenListener()方法 三种方法的比较 (1)在第二.三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以. (2)首选第二.三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容. 一些语法细节 (1)在第一种方法中,onclick大小写

react创建组件的三种方式

react创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同   1.函数式无状态组件 (1)语法 1 function myComponent(props) { 2 return 3 <div>Hello {props.name}</div> 4 } (2)特点 ● 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到state状态

并发编程(壹):创建线程的三种方式及其对比

创建线程的三种方式及其对比 1. 继承 Thread类 (1). 继承Thread类.并重写run()方法,该方法无参数,无返回值: (2). 创建子类实例,并实例化对象: (3). 通过start()方法启动,注意:不是通过run()方法启动. public class ThreadDemo extends Thread{ public void run(){ System.out.println("继承Thread创建线程的."); } } public class ThreadA

0166 DOM 之 节点操作: 删除节点,删除留言案例,复制(克隆)节点,动态生成表格案例,创建元素的三种方式,innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指 父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va

监听按钮点击事件的三种方式实现及调试信息输出的三种方式实现

监听按钮点击事件的三种方式实现: 1.匿名内部类 2.外部独立类 3.接口实现 package com.example.button; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.view.MenuItem; import android.view.View;

创建线程的三种方式

创建线程的三种方式 第一种:通过NSThread的对象方法 第二种:通过NSThread的类方法 第三种:通过NSObject的方法 准备在后台线程调用的方法 longOperation: - (void)longOperation:(id)obj { NSLog(@"%@ - %@", [NSThread currentThread], obj); } 方式1:alloc / init - start - (void)threadDemo1 { NSLog(@"before

React Native创建组件的三种方式

创建组件的三种方式 1.ES6创建组件的方式 export default class HelloComponent extends Component{ render(){ return <Text style={{color: 'red'}}>Hello</Text> } } 2.ES5创建组件的方式 var HelloComponent = React.createClass({ render(){ return <Text style={{color: 'red'}}