信鸽网

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

  作者：bea

在javascript中，可以为某个元素指定事件，指定的方式有以下三种： 1、在html中，使用onclick属性 2、在javascript中，使用onclick属性 3、在javascipt中，使用addEvenListener()方法 三种方法的比较 （1）在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。 （2）首选第二、三种，第一种不利于将内容与事件分离，也不能使用event对象的相关内容。 一些语法细节 （1）在第一种方法中，

在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>




有用  |  无用

猜你喜欢

您可能感兴趣的文章: