在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("adEventListener").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>
 

js----点击事件三种方法的更多相关文章

  1. Node.js写文件的三种方法

    Node.js写文件的三种方式: 1.通过管道流写文件 采用管道传输二进制流,可以实现自动管理流,可写流不必当心可读流流的过快而崩溃,适合大小文件传输(推荐) var readStream = fs. ...

  2. JS 判断数据类型的三种方法

    说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...

  3. js数组去重的三种方法

    <script type="text/javascript"> /*// 第一种冒泡法删除 var arr=[1,2,2,78,3,456,456]; for(var ...

  4. 【Javascript】JS遍历数组的三种方法：map、forEach、filter

    前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的 ...

  5. js 数组去重的三种方法（unique）

    方法一: Array.prototype.unique=function(){ var arr=[];//新建一个临时数组 for(var i=0;i<this.length;i++){//遍历 ...

  6. JS 创建元素的三种方法

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"> ...

  7. js获取时间戳的三种方法

    1.Date.Now() 2.new Date().getTime() 3.Date.parse(new Date()) 其中1和2是相同含义 chrome控制台键入:Date.now() ===ne ...

  8. 【JS】JS数组添加元素的三种方法

    1.push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 1).语法: arrayObject.push(newelement1,newelement2,....,newelement ...

  9. JS实现上传图片的三种方法并实现预览图片功能

    地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...

随机推荐

  1. Schema、API Schema与MFn

    大部分知识都是相通的,Maya和USD在设计上有很多相似之处,USD的Schema粗看很难理解,但实际上与Maya的MFn有着异曲同工之处.这篇文章会简单介绍一下这两个知识点,做个对比,了解下它们在各 ...

  2. C# Winform 中使用FTP实现软件自动更新功能

    实现思路:通过访问FTP站点,将站点中的文件下载至软件指定位置. 第一步:FTP站点中导入需要下载更新的程序文件,并添加配置文件(配置下载后文件的下载路径),如下图所示: 第二步:Winfrom程序读 ...

  3. excel安装wps后不能正常启动

    1. HKCU\Software\Microsoft\Office\15.0\Word\Options 设置NoReReg REG_DWORD =1 2.重命名C:\Program Files (x8 ...

  4. C#使用Linq to Sqlite

    1.首先到Nuget命令行运行: Install-Package linq2db.SQLite 2.在项目下添加一个文件夹:DataModels,用以存放数据库相关的文件,显得规整 3.找到CopyM ...

  5. LAB1 partII

    PartII   实现单词统计 实现 main/wc.go 两个函数 mapF() . reduceF() 单词是任意字母连续序列, 由unicode.IsLetter 决定字母 测试数据 pg-*. ...

  6. python列表生成式

    在Python编程中,list列表应用的比较广泛,而列表生成式是一个非常强大但是使用很简单的功能. 比如要生成1到100的数组列表[1,2,3,4......,97,98,99,100],可以使用li ...

  7. (转)配置、安装Apache24免装版

    去过官网下载的应该都知道现在apache已经不提供.exe的一键安装程序的形式了,下载到的都只有免安装版本的. 首先下载,不在叙述.下载解压之后会得到如下的目录:. 1.进入:apache24le-- ...

  8. vim YouCompleteMe 遇到的问题及解决

    问题1: 补充,升级gcc,g++ 到4.7以上的版本才能安装成功 github 官网 github https://github.com/Valloric/YouCompleteMe#ubuntu- ...

  9. Centos 7 虚拟机挂载U盘

    本文记录环境为在Windows 7环境下,通过VMware安装Centos 7.2.挂载U盘过程如下,供日后查看,也供各位读者遇到类似问题时参考. 挂载过程及问题排除如下: 1.因为是虚拟机,所以先到 ...

  10. dis集群研究和实践（基于redis 3.0.5） 《转载》

    https://www.cnblogs.com/wxd0108/p/5798498.html 前言 redis 是我们目前大规模使用的缓存中间件,由于它强大高效而又便捷的功能,得到了广泛的使用.现在的 ...