在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. POJ2151 动态规划

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; int ...

  2. JS 闭包问题

    一.什么是闭包?“官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述的太 ...

  3. CPLD的发展及趋势简介

    很多板子上,都看到过有CPLD的芯片,如我见过的一个R232电平转换小板上面就用的EPM240T控制器. 当时看到很奇怪,干啥用的,后来想想,232所需的电平不就是由EPM240T提供的嘛.想明白后就 ...

  4. 宏汇编软件MASM51的使用

    单片机开发可以用手工汇编和机器汇编两种方法.采用手工汇编就是先编写出汇编程序,然后对照单片机汇编表手工将汇编程序翻译成机器码,最后将机器码一个一个地送入开发仿真器的RAM中去进行调试. 由于采用手工汇 ...

  5. PowerShell中调用外部程序和进程操作命令例子

    学习PowerShell,我们不指望通过C#编程去搞定所有事情,我们应该记住cmd.exe或者说批处理给我们留下的宝贵财富——通过调用外部程序去解决问题.调用了外部程序,势必就要对进程进行管理,这就是 ...

  6. 【 Failed to create the Java Virtual Machine】的2种解决方式

    初学Android,下载并安装好了eclipse,ADT和SDK之后,打开Eclipse时,出现: Failed to create the Java Virtual Machine 点击确定,ecl ...

  7. GDKOI2015

    problems http://gdoi.sysu.edu.cn/wp-content/uploads/2015/03/GDKOI-2015-day1.pdf http://gdoi.sysu.edu ...

  8. JS控制菜单样式切换

    $('#subtabs a').each(function (i, ele) { var href = $(ele).attr("href"); if (location.href ...

  9. centerOS安装chkrootkit

    Chkrootkit是一个在本地系统检查rootkit痕迹的工具,它是检查系统二进制文件是否被rootkit病毒修改的一个shell脚本. (1)centerOS安装chkrootkit 安装gcc编 ...

  10. hdu 2817 A sequence of numbers(快速幂)

    Problem Description Xinlv wrote some sequences on the paper a long time ago, they might be arithmeti ...