- HTML中使用onclick属性
- JS中使用onclick属性
- JS中使用addEvenListener()方法
三种方法的比较
在第二、三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以。
语法细节
- 在第一种方法中,onclick大小写无关,但在第二种方法中,必须使用小写。因为HMTL对大小写不敏感,而JS则会区分大小写。
- 在第二、三种方法中,指定函数名时没有双引号,而第一种作为一个HTML属性,需要双引号。
- 第一种方法调用的函数后需要括号,第二、三种不需要。
HTML中使用onclick属性
<html>
<head>
<title>方式一</title>
<style>
#demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
</style>
<script>
function add(){
var sum;
sum=9+15;
alert(sum);
}
</script>
</head>
<body>
<div id="demo" onclick="add()"></div>
</body>
</html>
JS中使用onclick属性
<html>
<head>
<title>方式二</title>
<style>
#demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
</style>
<script>
function add(){
var sum;
sum=9+15;
alert(sum);
}
window.onload=function(){
var box=document.getElementById("demo");
box.onclick=add;
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
JS中使用addEvenListener()方法
<html>
<head>
<title>方式三</title>
<style>
#demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
</style>
<script>
function add(){
var sum;
sum=9+15;
alert(sum);
}
window.onload=function(){
var box=document.getElementById("demo");
box.addEventListener("click",add);
}
</script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
补充:
今天看了imooc上的课程,对于事件的相关知识加深了一些理解。以上内容是针对点击事件为例讲述的事件处理程序,现在完整补充事件的三种处理程序。
HTML处理程序
将事件的JS代码嵌入HTML的节点结构中,但这有很大的缺点:HTML和JS很紧密的耦合在一起,不方便修改。
<input type="button" value="按钮" onclick="handle()">
<script>
function handle(){
alert("这是个测试");
}
</script>
DOM 0级事件处理程序
这是较为传统也是很多人使用的方式,办一个函数赋值给一个事件的处理程序属性。它的优点:很简单,可以跨浏览器处理。
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("这也是个测试");
}
//删除onclick属性,移除事件
btn.onclick = null;
</script>
DOM 2级事件处理程序
该方式定义了两个方法用于处理指定和删除事件处理程序的操作,addEventListener() 和 removeEventListener()。它们接受三个参数:要处理的事件名、作为事件处理程序的函数、布尔值(false为冒泡,true为捕获)
<input type="button" value="按钮" id="btn">
<script>
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert("这还是个测试");
},false);
</script>
注意,有个特殊的地方,事件名变成了 “click”,是没有 “on” 的哟。而且,该方式不兼容IE浏览器。
IE事件处理程序
- attachEvent(),添加事件
- detachEvent(),删除事件
它们接受两个参数:要处理的事件名、作为事件处理程序的函数。没第三个参数布尔值,这是因为IE8以及更早版本的IE只支持冒泡模式。
跨浏览器兼容方法
采用最普通的能力检测。能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何,只需确定浏览器是否支持特定的能力,也就是说看该浏览器是否支持某些方法。
<div>
<input type="button" value="按钮" id="btn">
</div>
<script>
var btn = document.getElementById("btn");
var event = {
// 添加事件
addEvent:function(elem,type,handle){ //根据DOM2级事件处理程序的三个参数
if(elem.addEventListener){ //非IE浏览器
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){ //IE浏览器
elem.attachEvent("on"+type,handle);
}else{ //以上都不支持时采用DOM0级处理程序
elem["on"+type]=handle;
}
},
// 删除事件
removeEvent:function(elem,type,handle){
if(elem.removeEventListener){
elem.removeEventListener(type,handle,false);
}else if(elem.detachEvent){
elem.detachEvent("on"+type,handle);
}else{
elem["on"+type]=null;
}
}
};
// 调用封装好的函数
event.addEvent(btn,"click",function(){alert("这就是个测试")});
</script>