原生JS的事件绑定

原生js的事件绑定有两种方法:

1.通过HTML属性处理函数的绑定

example:

1)<button id='oBtn' οnclick="alert('hahaha')">click</button>


2)<button οnclick="la()">click</button>

<script>
function la(){alert('xixi');}
</script>

这种方法适合编写简短的小事件,不会涉及到太大的性能问题。


2通过JavaScript对象属性来绑定

var btn = document.getElementById('oBtn');

btn.onclick = function(){

alert('xixi');}

但是这种方法的缺陷就是只能对一个元素的一个事件进行绑定,会出现覆盖的效果,只会执行最后面定义的。


3利用所有文档元素的方法

这种方法有兼容性问题

(1)addEventListener(type,handler,boolean),兼容IE8以后的所有浏览器

(2)attachEvent(type,handler),适用IE8以下的版本

用法:oDiv1.addEventListener('click',function(){
alert('div11');
},false);

事件的执行顺序与事件的注册顺序是一致的,false:发生在冒泡阶段 , true则发生在捕获阶段


    oDiv1.attachEvent('onclick',function(){
alert('haha');
});

注销的方法分别是removeEvent()  and detach()

可以自己封装一个函数来做兼容:

//add~event

funciton addEvent(elem,type,fn){

if(elem.addEventListener)//judge 

{

    elem.addEventListener(type,fn,false);//默认是冒泡

 }

else if(elem.attachEvent){

    elem[type+fn] = function(){

    fn.call(elem);

    };

   elem.attachEvent('on'+type,elem[type+fn]);

}

else{

elem['on'+type] = fn;

}

//remove~ event

function removeEvent(elem,type,fn){
if(elem.removeEventListener){
elem.removeEventListener(type,fn,false);
}else if{
elem.detachEvent('on'+type,elem[type+fn]);
}else{
elem['on'+type] = fn;
}
}

//call function

addEvent(oBtn,'click',function(){
alert(this.innerHTML);
});

removeEvent(oBtn,'click',,function(){
alert(this.innerHTML);
});




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值