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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
解析htaccess伪静态的规则
2013/06/18 PHP
php生成随机密码自定义函数代码(简单快速)
2014/05/10 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python with语句和过程抽取思想
2019/12/23 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python作用域与名字空间原理详解
2020/03/21 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
上海天奕面试题笔试题
2015/04/19 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
职称自我鉴定
2013/10/15 职场文书
在求职信中如何凸显个人优势
2013/10/30 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
年终考核实施方案
2014/05/26 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
个人催款函范文
2015/06/23 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
新学期感想
2015/08/10 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技