关于DOM事件处理的小基础
Dom中的0级事件处理程序。
把一个函数赋值给一个元素的属性，这样的方法叫做dom事件0级的事件处理程序。可以这样想，我们先把某个元素用document.GetelementById（””）;
这样取出来然后赋值给某个元素
比如
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
对于documents数组的实验
</title>
</head>
<body>
<div>
<input type="button" value="submit" id="btn"/>
</div>
<script>
var bt=document.getElementById("btn");
bt.onclick=function(){
alert("这个是我们的alert");
}
</script>
</body>
</html>
对于Dom0级事件，我们通常采用的处理方式都是我们先通过一定的方式获取相应的按钮或者需要关联事件的元素而后我们采用对我们所获取到的元素采用匿名函数的形式给相应的元素完成事件的添加
删除事件，btn.onclick=null;
8
DOM2级事件处理方式
Dom2时间时我们定义了两个方法
addEventListener() 和removeEventListener();
这两个方法的参数三个，要处理的事件名，作为事件处理的函数，布尔值。
在这里要处理的事件名全部要去掉on，比如onclick 在这个函数中要成为click
除此之外，我们作为事件处理的函数可以是一个明确的函数也可以是一个匿名函数，
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
对于documents数组的实验
</title>
</head>
<body>
<div>
<input type="button" value="submit" id="btn"/>
<input type="button" value="submit1" id="btn2">
</div>
<script>
function showMessage(){
alert("这个很神奇！");
}
var bt=document.getElementById("btn");
var bt2=document.getElementById("btn2");
bt.onclick=function(){
alert("这个是我们的alert");
}
bt2.addEventListener("click",showMessage,false);
</script>
</body>
</html>
最需要注意的地方，我们需要对click加引号！
我们必须对click加引号！！
我们必须对click加引号！！！
重要的事情说三遍！！！
当我们需要匿名函数时，一样的function（）{
Alert（this.name）;
}
This 的动态识别功能使得我们可以获取到我们正在添加时间的元素的value！！
同时我们还可以对一个元素添加多个时间，比如我们除了加onclick之外我们还可以加onmouseover之类的！！！
在调用时，我们添加的多个事件处理程序，在调用时浏览器默认的按照顺序来一个一个的实现！！
9
IE事件处理程序
AttchEvent和detaEvent 默认的加到冒泡阶段，我们只需要加两个属性，第一个是我们要添加事件的元素，第二个是具体的事件处理方式
注意：
在这个当中我们的click要加上on变成onclick
10
跨浏览器事件处理。
跨浏览器的事件处理时，我们最好把跨浏览器事件封装到一个方法当中！
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>
对于documents数组的实验
</title>
</head>
<body>
<div>
<input type="button" value="submit" id="btn"/>
<input type="button" value="submit1" id="btn2">
</div>
<script>
function showMessage(){
alert("这个很神奇！");
}
var bt=document.getElementById("btn");
var event={
addhander:function(element,type,hander){
if(element.addEventListener(type,hander,false)){
element.addEventListener(type.hander,false);
}else if(element.attachEvent("on"+type,hander)){
element.attachEvent("on"+type,hander);
}else{
element["on"+type]=hander;// .click完全等价于【"on"+type]
}
}
}
event.addhander(btn,"click",showMessage());</script>
</body>
</html>
添加和删除封装在一个变量当中
共同学习，写下你的评论
评论加载中...
作者其他优质文章
