在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. Matlab piecelin

    function v = piecelin(x,y,u) %PIECELIN Piecewise linear interpolation. % v = piecelin(x,y,u) finds t ...

  2. ReactNavtive框架教程（4）

    开头的响应码, 这些代码都很实用. 比如202 和 200表示返回一个推荐位置的列表.当完毕这个实例后.你能够尝试处理这些返回码.并将列表提供给用户选择. 保存,返回模拟器,按下Cmd+R ,然后搜索 ...

  3. IAR FOR STM8 学习笔记 IAR工程的建立

    STM8是ST意法半导体针对工业应用和消费电子开发而推出的8位单片机. 每种MCU都有自身的优点与缺点,与其它8-bit MCU相比,STM8 8-bit MCU最大的特点是: · 内核: o 最高f ...

  4. BZOJ3282: Tree (LCT模板)

    Description 给定N个点以及每个点的权值,要你处理接下来的M个操作. 操作有4种.操作从0到3编号.点从1到N编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor和 ...

  5. CISP/CISA 每日一题 18

    CISSP 每日一题(答)What is the purpose of an access review and audit? Checkto ensure that users do not hav ...

  6. 【例7-15 UVA-1603】Square Destroyer

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先预处理出所有的正方形(长度为1,2...n的)所包含哪些边. 然后记录每个正方形的应有边长和实际边长(有些边被删掉了); 然后搜的 ...

  7. enq: TX - row lock contention故障处理一则

    一个非常easy的问题,之所以让我对这个问题进行总结.一是由于没我想象的简单,在处理的过程中遇到了一些磕磕碰碰,甚至绕了一些弯路.二是引发了我对故障处理时的一些思考. 6月19日,下午5点左右.数据库 ...

  8. [Node] Stateful Session Management for login, logout and signup

    Stateful session management: Store session which associate with user, and store in the menory on ser ...

  9. Kurento应用开发指南(以Kurento 5.0为模板) 之中的一个：简单介绍，安装与卸载

    文件夹 1. Kurento是什么               3 2. Kurento简单介绍                       3 2.1 WebRTC媒体server         ...

  10. 看<Asp.net夜话>随笔(2013-10-13)

    1.Asp.net内置对象 1.1Request对象 封装了客户端请求信息 1.2Response对象 代表了服务器响应对象,可以向客户端返回数据 1.3Server对象 是用于获取服务器的相关信息的 ...