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 相关文章推荐
图片自动缩小 点击放大
Jul 07 Javascript
JavaScript 事件系统
Jul 22 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 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
重置版战役片段
2020/04/09 魔兽争霸
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
PHP引用返回用法示例
2016/05/28 PHP
用javascript实现自定义标签
2007/05/08 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python的多态性实例分析
2015/07/07 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
python多进程读图提取特征存npy
2019/05/21 Python
关于pytorch中网络loss传播和参数更新的理解
2019/08/20 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
读书心得体会
2013/12/28 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
公司离职证明标准样本
2014/10/05 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers