增添自定义事件

2012-11-23

添加自定义事件htmlhead/headbody button idbtn click/button/body/htmlscript type

添加自定义事件

<html><head></head><body ><button id="btn" >click</button></body></html><script type="text/javascript">function BtnClick(evt){alert(this.id +" click");}var btn = document.getElementById("btn");btn.onclick = BtnClick;btn.attachEvent('onclick', BtnClick);btn.myclick = BtnClick;btn.myclick();//btn click</script>

首先弹出btn click 这次执行的是 btn.myclick 这里我们给btn绑定了一个方法(这就给js添加自定义事件提供了先决条件)
然后单击btn 的时候会依次弹出 btn click 和 undefined click
第一次是因为 btn.onclick 直接给btn 绑定了方法而调用方法的上下文是 btn
所以this.id 就是btn的 id
第二次 btn.attachEvent('onclick', BtnClick);
其实我们可以写成 btn.attachEvent('onclick', window.BtnClick);
这样就是看出调用BtnClick 上下文是 window.

简单的添加自定义事件

// 添加自定义事件 function addEvent(obj, type, handler){obj[type] = handler;//事件其实就是对象的一个属性 然后绑定一下可执行方法}// 移除自定义事件function removeEvent(obj, type){delete obj[type];}// 触发/派发自定义事件function dispatchEvent(obj, type){obj[type]();//执行对象绑定的方法}var btn= document.getElementById("btn");function BtnClick(){alert(1);}addEvent(btn, 'click', BtnClick);dispatchEvent(btn, 'click');

热点排行

Web前端

增添自定义事件