在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. BZOJ 1027 JSOI2007 合金 计算几何+Floyd

    题目大意:给定一些合金,选择最少的合金,使这些合金能够按比例合成要求的合金 首先这题的想法特别奇异 看这题干怎么会想到计算几何 并且计算几何又怎么会跟Floyd挂边 好强大 首先因为a+b+c=1 所 ...

  2. Oracle Sqlplus中上下键出现^[[A乱码问题

    安装rlwrap  下载:http://utopia.knoware.nl/~hlub/uck/rlwrap/ 或者 百度云盘:http://pan.baidu.com/s/1ntM8YXr 须要先安 ...

  3. 10小时之内，暴力破解SSH账号的IP

    10小时之内,暴力破解SSH账号的IP,IP 地址数据来源于  ip138.com 182.18.76.246 北京市昌平区 北京亿安天下网络科技有限公司 联通 221.223.200.143 北京市 ...

  4. 73.fseek与宽字符读取文件

    fseek //文件路径 ] = "1.txt"; //FILE *pf = fopen(path, "a+");//尾部添加,文件指针在尾部 //FILE * ...

  5. map（froeach改变值,map生成新数组）

    http://www.365mini.com/page/jquery-map.htm <input id="n1" name="uid" type=&qu ...

  6. 如何运行vue项目（维护他人的项目）

    假如你是个小白,在公司接手他人的项目,这个时候,该怎么将这个项目跑通? 前提: 首先,这个教程主要针对vue小白,并且不知道安装node.js环境的.言归正传,下面开始教程:在维护项目之前,需要把所有 ...

  7. 杭电1102 Constructing Roads

    Constructing Roads Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  8. [Javascript] Different ways to create an new array/object based on existing array/object

    Array: 1. slice() const newAry = ary.slice() 2. concat const newAry = [].concat(ary) 3. spread oprea ...

  9. RHEL6安装调试过程中遇到的问题集

    /*** **问题集 2014/6/9 20:55:52** **Autor: Weigong Xu ** ***/ 1. Linux中开启22port: 22port是ssh服务的.你仅仅要启动ss ...

  10. python项目实战-小游戏1

    项目规则: 1.玩家和敌人分别从现有的角色中选择3个角色 2.随机生成目前的血量,和攻击量 3.游戏规则:当玩家向敌人发起攻击,敌人当前的血量=之前的血量-玩家的血量,同理 4.3局两胜 5.自定义玩 ...