javascript中定义事件的三种方式
来源:互联网 发布:c语言delay用法 编辑:程序博客网 时间:2024/06/05 14:56
在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);
完整代码如下:
在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>
0 0
- javascript中定义事件的三种方式
- javascript中定义事件的三种方式
- javascript中定义事件的三种方式
- javascript中定义事件的三种方式
- javascript中定义事件的三种方式
- JavaScript中函数定义的三种方式
- JavaScript中对事件的三种监听方式
- javascript 定义事件的方式
- JavaScript定义函数的三种方式
- javascript 定义类的三种方式
- javascript定义函数的三种方式
- javascript定义函数的三种方式
- javaScript定义函数的三种方式
- javascript定义函数的三种方式
- javascript事件处理的三种方式
- JavaScript事件处理的方式(三种)
- 控件OnClick事件三种定义方式
- JavaScript 定义function的三种方式小结
- (4.3.2.12)Android和Java的轻巧Wire协议缓冲器
- 关于在AndroidStudio下导入Eclipse工程的图片错误
- Go:操作注册表
- 对一个恶搞的批处理文件的学习
- Android HotFix动态加载框架介绍
- javascript中定义事件的三种方式
- Linux操作系统中BSD套接口开发的基础介绍
- 获得父类的泛型
- 网络英文词汇解释
- 产品助理day7
- 插入排序-Insert Sort
- 文章标题
- ISDN常用术语解释
- Android地图应用新视界--mapbox的常用功能封装工具类