一.绑定事件
事件本来就存在,绑定的是事件处理函数。比如:
<div>111</div>
这也可以点击,没有变化只是因为没有绑定事件处理函数。
二.onclick是on+事件类型
三.绑定事件处理函数方式
1.element.onxxx=function(event){}
- 兼容性很好,但是一个元素的同一个事件上只能绑定一个处理程序
基本等同于写在HTML行间上。 - 将even(事件)作为参数,就是这个“点击”事件,通过这个even,可以获取到event.target,就是点击的对象等等属性。even参数可加可不加,需要用到的时候就加。
- 解绑事件:element.onxxx=null;
比如只能点击一次:
<body>
<div>111111</div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
div.onclick=function () {
console.log("a");
this.onclick=null;
}
</script>
</body>
2.obj.addEventListener(“type”,fn,false)
IE9以下不兼容,可以为一个事件绑定多个处理程序。
-
event:必须。字符串,指定事件名。
注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。 -
function 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。 -
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行
可能值:
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行 -
解除事件处理程序:ele.removeEventListener(“type”,fn,false)。
<script type="text/javascript">
window.onload=function () {
var btn=document.getElementsByTagName("button")[0];
btn.addEventListener("click",function () {
alert("hh对的");
},false)
};
</script>
<body>
<button>点击</button>
</body>
3.obj.attachEvent(‘on’+type,fn);
IE独有,一个事件同样可以绑定多个处理程序。
解除事件处理程序:obj.detachEvent(on
+type,fn)
五.事件处理程序的运行环境
1.element.onxxx=function(event){}
- 程序this指向是dom元素本身
2.obj.addEventListener(“type”,fn,false)
- 程序this指向是dom元素本身
3.obj.attachEvent(on
+type,fn);
- 程序this指向window
六.封装兼容性的addEvent(ele,type,handle)方法
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法this
参数:
- elem 要绑定事件的对象
- type 事件的字符串类型(不要on)
- handle 回调函数
<body>
<script type="text/javascript">
function addEvent(elem,type,handle) {
/*若元素没有addEventListener属性,elem.addEventListener值为undefined,布尔值为false*/
if(elem.addEventListener){
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){
elem.attachEvent('on'+type,function () {
//在匿名函数中调用回调函数,匿名函数是由window调用的,而handle的this是obj
handle.call(elem);
})
}else {
elem['on'+type]=handle;
}
}
</script>
</body>
例如:
<body>
<button>点击</button>
<script type="text/javascript">
function addEvent(elem,type,handle) {
/*若元素没有addEventListener属性,elem.addEventListener值为undefined,布尔值为false*/
if(elem.addEventListener){
elem.addEventListener(type,handle,false);
}else if(elem.attachEvent){
elem.attachEvent('on'+type,function () {
//在匿名函数中调用回调函数,匿名函数是由window调用的,而handle的this是obj
handle.call(elem);
})
}else {
elem['on'+type]=handle;
}
}
var btn=document.getElementsByTagName("button")[0];
addEvent(btn,"click",function () {
alert("hh对的");
})
</script>
</body>