添加自定义事件
<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');