javascript中为某个元素指定事件的三种方式


Posted in Javascript onAugust 07, 2014

在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 相关文章推荐
了解jQuery技巧来提高你的代码
Jan 08 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
JSON 数据格式详解
Sep 13 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
谷歌地图打不开的解决办法
Aug 07 #Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 #Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 #Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 #Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 #Javascript
js触发select onchange事件的小技巧
Aug 05 #Javascript
jquery中each遍历对象和数组示例
Aug 05 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JavaScript错误处理
2015/02/03 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
快速入门Vue
2016/12/19 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python计算最大优先级队列实例
2013/12/18 Python
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
应届大学生自荐信
2013/12/05 职场文书
物理教育专业求职信
2014/06/25 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
国博复兴之路观后感
2015/06/02 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
PHP基本语法
2021/03/31 PHP
Python torch.flatten()函数案例详解
2021/08/30 Python
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python