在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中定义事件的三种方式的更多相关文章

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

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

  2. JavaScript中定义对象的四种方式

    最近在阅读< JavaScript 高级程序设计>,未免遗忘读过的内容,就打算以博客的形式做些读书笔记.今天介绍的是 JavaScript 中的四种定义对象的方法,除了这四种方法,还有工厂 ...

  3. js中定义变量的三种方式const,val,let 的区别

    js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...

  4. 简要描述 JavaScript 中定义函数的几种方式

    JavaScript 中,有三种定义函数的方式: 1.函数语句:即使用 function 关键字显式定义函数.如: function f(x){ return x+1; }  2.函数定义表达式:也称 ...

  5. JavaScript中清空数组的三种方式

    方式1,splice ? 1 2 3 var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清 ...

  6. JavaScript中定义函数的几种方式

    函数的组成:函数名 + 函数体 1.使用function关键字定义函数 -- 具有优先级,优先将function关键字定义的函数优先执行 function  functionName(arg0, ar ...

  7. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  8. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  9. javascript中var let const三种变量声明方式

    javascript中var let const三种变量声明方式 1.var  ①var表示声明了一个变量,并且可以同时初始化该变量. ②使用var语句声明的变量的作用域是当前执行位置的上下文:一个函 ...

随机推荐

  1. C语言基础学习基本数据类型-变量的命名

    变量的命名 变量命名规则是为了增强代码的可读性和容易维护性.以下为C语言必须遵守的变量命名规则: 1. 变量名只能是字母(A-Z,a-z),数字(0-9)或者下划线(_)组成. 2. 变量名第一个字母 ...

  2. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  3. C程序设计语言练习题1-10

    练习1-10 编写一个将输入复制到输出的程序,并将起重的制表符替换为\t,把回退符替换成\b,把反斜杠替换为\\.这样可以将制表符和回退符以可见的方式显示出来. 代码如下: #include < ...

  4. vi编辑器经典技巧 -备

    a)vi编辑器 (visual Interface简称) Linux常用,输出,删除,查找,替换,块操作,定制 b) vim编辑器 (vi IMproved简写)是vi增强版本,在vi上增加了很多功能 ...

  5. 编译recovery及过程中的部分错误解决

    你必须使用32位或64位Ubuntu系统,关于如何建立编译环境和同步源码的指导,请自己查找有关指导的文章. 1, 安装所需要的包 2, 建立编译的环境,并同步CWM所需的源码,CyanogenMod源 ...

  6. 安装Visual Studio 2010之后怎样安装MSDN Library

    这篇博客参考自:http://justargon.blog.163.com/blog/static/21394413020134100737688/ MSDN2010安装及使用(MSDN Librar ...

  7. 一直想测试的NGINX变量输出，最于有办法了。

    参考URL: http://blog.ailms.me/2013/08/04/nginx-server_name-and-host-difference.html 要是可能在正则测试及REWRITE就 ...

  8. Codeforces 429B Working out

    http://codeforces.com/contest/429/problem/B 题意:一个从左下到右上,一个从左上到右下,要求只相交一次,求整个路径和的最大值 思路:发现可以枚举交点,然后算到 ...

  9. CCI_chapter 19 Moderate

    19 1  Write a function to swap a number in place without temporary variables void swap(int &a, i ...

  10. Sql 高效分页

    http://www.111cn.net/database/mysql/46350.htm http://g.kehou.com/t1032617472.html http://www.cnblogs ...