javascript中定义事件的三种方式

在javascript中，可以为某个元素指定事件，指定的方式有以下三种：

1、在html中，使用onclick属性

2、在javascript中，使用onclick属性

3、在javascipt中，使用addEvenListener()方法

三种方法的比较

（1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。

（2）首选第二、三种，第一种不利于将内容与事件分离，也不能使用event对象的相关内容。

一些语法细节

（1）在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。

（2）在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。

（3）第一种方法需要括号，第二、三种不需要。

οnclick="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" οnclick="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）第一种方法需要括号，第二、三种不需要。

οnclick="clickHandler()"

document.getElementById("jsOnClick").onclick = clickHandler2;

document.getElementById("addEventListener").addEventListener("click", clickHandler2);

完整代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="htmlOnClick" οnclick="clickHandler()">htmlOnClick</button>

<button id="jsOnClick">jsOnClick</button>

<button id="addEventListener">addEventListener</button>

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中定义事件的三种方式相关推荐

JavaScript中定义对象的几种方式
JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下5种方式(附加改进方式): 1.基于已有对象扩充其属性和方法 2.工厂方式 3.构造函数方式 4.原型(&q ...
代码示例：Java中定义数组的三种方式
在Java中,数组的定义有三种方式,其基本语法格式如下: 数组类型[] 数组名 = new 数组类型[数组长度]; 数组类型[] 数组名 = new 数组类型[]{数组元素0,数组元素1,...}; ...
Python的类中定义函数的三种方式及其利用
类中方法/函数: 普通方法直接定义(含self) 类方法 @classmethod 静态方法 @staticmethod 类中变量: 静态变量普通变量定义在构造函数中(__init__) 看代码 ...
1.JavaScript中定义数组的两种主要方式
JavaScript中定义数组的两种主要方式(new Array()和[]方式) new Array() ①可以用像JAVA的那种写法的方式定义,如 var arr = new Array() 这样定 ...
java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
java c 事件对比_javacsript绑定事件的三种方式与各自特点
javacsript绑定事件的三种方式与各自特点 javacsript绑定事件的三种方式与各自特点点击打开链接 javacsript绑定事件的三种方式与各自特点 feipeng8848 2017-0 ...
DOM注册事件的三种方式~满满的干货哦
Hello ~ 下面是对DOM注册事件的三种方式,希望可以帮助到有需要的小伙伴注册事件就是将JavaScript函数与指定的事件相关联. 当该事件被触发时,绑定的函数会被调用. HTML页面元素提供 ...
Django中Model继承的三种方式
Django中Model继承的三种方式 Django中Model的继承有三种: 1.抽象继承 2.多表继承 3.proxy model(代理model) 1.抽象继承第一种抽象继承,创建一个通用父类 ...
android获取自定义属性,android 自定义控件中获取属性的三种方式(转)
第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 android:layout_width="f ...

javascript中定义事件的三种方式

javascript中定义事件的三种方式相关推荐

最新文章

热门文章