在javascript中，可以为某个元素指定事件，指定的方式有以下三种：
1、在html中，使用onclick属性
2、在javascript中，使用onclick属性
3、在javascipt中，使用addEvenListener()方法

三种方法的比较
（1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。
（2）首选第二、三种，第一种不利于将内容与事件分离，也不能使用event对象的相关内容。

一些语法细节
（1）在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。
（2）在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。
（3）第一种方法需要括号，第二、三种不需要。
onclick="clickHandler()"
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", clickHandler2);
 
完整代码如下：
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Even Deom</title>

</head>

<body>

 <button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>

 <button id="jsOnClick">jsOnClick</button>

 <button id="addEventListener">addEventListener</button>

 <script defer>

 function clickHandler() {

  alert("onclick attribute in html");

 }

 function clickHandler2(e) {

  alert(e.target.innerHTML);

 }

 document.getElementById("jsOnClick").onclick = clickHandler2;

 document.getElementById("addEventListener").addEventListener("click",

   clickHandler2);

</script>

</body>

</html>

在javascript中，可以为某个元素指定事件，指定的方式有以下三种：
1、在html中，使用onclick属性

2、在javascript中，使用onclick属性
（1）注意函数名没有双引号。

3、在javascipt中，使用addEvenListener()方法

三种方法的比较
（1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。

一些语法细节
（1）在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。
（2）在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。
（3）第一种方法需要括号，第二、三种不需要。
onclick="clickHandler()"
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", clickHandler2);
 
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>

</head>
<body>
 <button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
 <button id="jsOnClick">jsOnClick</button>
 <button id="addEventListener">addEventListener</button>
 
 <script defer>
 function clickHandler() {
  alert("onclick attribute in html");
 }
 function clickHandler2(e) {
  alert(e.target.innerHTML);
 }
 document.getElementById("jsOnClick").onclick = clickHandler2;
 document.getElementById("addEventListener").addEventListener("click",
   clickHandler2);
</script>
</body>
</html>

版权声明：本文为博主原创文章，未经博主允许不得转载。

javascript中定义事件的三种方式 分类： C1_HTML/JS/JQUERY 2014-08-07 10:27 634人阅读 评论(0) 收藏的更多相关文章

  1. javascript中定义事件的三种方式

    在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使 ...

  2. linux中echo的用法 分类： 学习笔记 linux ubuntu 2015-07-14 14:27 21人阅读 评论(0) 收藏

    1.echo命令我们常用的选项有两个,一个是-n,表示输出之后不换行,另外一个是-e,表示对于转义字符按相应的方式处理,如果不加-e那么对于转义字符会按普通字符处理. 2.echo输出时的转义字符 \ ...

  3. 事件处理之一：两种方式：监听器与回调 分类： H1_ANDROID 2013-10-31 10:26 3250人阅读 评论(0) 收藏

    Android组件的事件处理有2种方式: 1.基于监听器的事件处理方式:先定义组件,然后为组件设定监听器. 详见http://blog.csdn.net/jediael_lu/article/deta ...

  4. JavaScript、Ajax与jQuery的关系 分类： C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  5. C#中的线程(上)-入门 分类： C# 线程 2015-03-09 10:56 53人阅读 评论(0) 收藏

    1.     概述与概念 C#支持通过多线程并行地执行代码,一个线程有它独立的执行路径,能够与其它的线程同时地运行.一个C#程序开始于一个单线程,这个单线程是被CLR和操作系统(也称为"主线 ...

  6. log4j配置文件及nutch中的日志配置 分类： B1_JAVA 2015-02-17 10:58 483人阅读 评论(0) 收藏

    吐槽几句,log4j的坑啊.... (1)CLASSPATH中不能有多个log4j的版本本,否则有有奇形怪状的NoSuchMethod, NoSuchFiled, NoClassDefineFound ...

  7. Windows中的DNS服务——正向解析&反向解析配置 分类： AD域 Windows服务 2015-07-16 20:21 19人阅读 评论(0) 收藏

    坚信并为之坚持是一切希望的原因. DNS服务是AD域不可或缺的一部分,我们在部署AD域环境时已经搭建了DNS服务(windows server 2008 R2域中的DC部署),但是DNS服务的作用还是 ...

  8. NoSql中的B-tree、B+tree和LSM-tree 分类： B7_HBASE 2015-03-15 18:27 85人阅读 评论(0) 收藏

    总结: 1.B+树将数据完全排序,读数据时很快,但当要修改数据时,就需要将新入数据下面的数据重新排位,特别是当写入的数据排在较高的位置时,需要大量的移位操作才能完成写入. 2.SLM牺牲部分的读性能, ...

  9. Java获取项目中的路径 分类： Java Game 2014-08-14 10:17 122人阅读 评论(0) 收藏

    在项目中经常需要获取某个文件的路径: 在这里提供一些获取路径的方法.. 1.此种方式获取的路径,是当前类所在的路径: UserDAOTest.class.getResource("UserD ...

随机推荐

  1. 通过OpenSSL解析X509证书基本项

    在之前的文章"通过OpenSSL解码X509证书文件"里.讲述了怎样使用OpenSSL将证书文件解码,得到证书上下文结构体X509的方法. 以下我们接着讲述怎样通过证书上下文结构体 ...

  2. 2. APIS官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2. APIS .APIS Apache Kafka引入一个新的java客户端(在o ...

  3. 配置spotlight连接linux服务器

    本文转自(https://blog.csdn.net/qq_31391261/article/details/79429098) 一.配置spotlight连接linux服务器 1.以管理员身份运行软 ...

  4. Android JNI用于驱动測试

    硬件平台:S3C6410 操作系统:Ubuntu.windows 板子系统:Android 开发工具:jdk.ndk,eclipse 本次測试从linux内核模块编译開始.以S3C6410的pwm驱动 ...

  5. [转载]Google Java Style 中文版

    转自:http://www.blogjava.net/zh-weir/archive/2014/02/08/409608.html Google Java Style 中文版     基于官方文档20 ...

  6. bootstrap课程13 bootstrap的官方文档中有一些控件的使用有bug，如何解决这个问题

    bootstrap课程13  bootstrap的官方文档中有一些控件的使用有bug,如何解决这个问题 一.总结 一句话总结:因为演示是正常的,所以检查演示效果的代码,把那一段相关的都弄过来就可以了 ...

  7. js遍历对象的属性和方法

    js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...

  8. 学习笔记（二）：javascript之dom操作

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  9. [转]Linq使用心得——SelectMany替代二重foreach循环

    本篇记录了Linq学习的心得,较为浅显,各位大牛请轻拍. 学习Linq其实已经很久了,但是一直没有使用的习惯,故水平也始终没有提高.近来刻意强迫自己用Linq来替代C# 2.0的一些写法.这里有一些心 ...

  10. iOS开发RunLoop学习：一：RunLoop简单介绍

    一:RunLoop的简单介绍 #import "ViewController.h" @interface ViewController () @end @implementatio ...