代码如下:
/*
* 事件注册
* @param Element ele
* @param String eventType
* @param Functionfn
* @param Boolean isRepeat
* @param Boolean isCaptureCatch
* @return undefined
*/
function loginEvent(ele , eventType , fn , isRepeat , isCaptureCatch){
if (ele == undefined || eventType === undefined || fn === undefined) {
throw new Error('传入的参数错误!')
}
if (typeof ele !== 'object') {
throw new TypeError('不是对象!')
}
if (typeof eventType !== 'string') {
throw new TypeError('事件类型错误!')
}
if (typeof fn !== 'function') {
throw new TypeError('fn 不是函数!')
}
if (isCaptureCatch === undefined || typeof isCaptureCatch !== 'boolean') {
isCaptureCatch = false
}
if (isRepeat === undefined || typeof isRepeat !== 'boolean') {
isRepeat = true
}
if (ele.eventList === undefined) {
ele.eventList = {}
}
if (isRepeat === false) {
for (var key in ele.eventList)
{
if (key === eventType) {
return '该事件已经绑定过!'
}
}
}
// 添加事件监听
if (ele.addEventListener) {
ele.addEventListener(eventType , fn , isCaptureCatch)
} else if (ele.attachEvent) {
ele.attachEvent('on' + eventType , fn)
} else {
return false
}
ele.eventList[eventType] = true
}
绑定事件 有直接在dom写el.on+type=function(){} 可以通过赋值重置为null这种方式可以用typeof el.on+type =='function'
还有就是addEventListener/attachEvent,解绑就需要用removeEventListener/detachEvent
这个就难写了,我觉得如果事件是你自己绑定的,那就在绑定的时候,为元素添加属性标识
原生实现无法判断是否有事件。如果确实需要请参照以下代码,另外本代码只使用于调用dom2形式加载或者移除事件功能,对应dom0类型的没有做测试。
以下代码修改了原生的Element对象,是否需要这样做,请自己酌情处理。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
* 此处代码必须放到任何javascript代码之前。另外增加事件只能用addEventListener形式。
*/
(function() {
Element.prototype.eventListenerList = {}
Element.prototype._addEventListener = Element.prototype.addEventListener
Element.prototype._removeEventListener = Element.prototype.removeEventListener
Element.prototype.addEventListener = function(a,b,c) {
this._addEventListener(a,b,c)
if(!this.eventListenerList[a]) this.eventListenerList[a] = []
this.eventListenerList[a].push(b)
}
Element.prototype.removeEventListener = function(a,b,c){
this._removeEventListener(a, b,c)
if(this.eventListenerList[a]){
var arr = this.eventListenerList[a]
for(var i =0i<arr.lengthi++){
if(arr[i].toString() === b.toString()){
this.eventListenerList[a].splice(i,1)
}
}
}
}
})()
//此后为测试代码。
window.onload = function(){
var dom = document.getElementById("test")
//增加三个监听
dom.addEventListener("click",function(){
console.info("click function")
},false)
dom.addEventListener("click",function(){
console.info("click function2")
},false)
dom.addEventListener("click",function(){
console.info("click function3")
},false)
console.log(dom.eventListenerList["click"].length)
//读出监听的方法
var clicks = dom.eventListenerList.click
if(clicks) clicks.forEach(function(f) {
console.log("I listen to this function: "+f.toString())
})
//删除监听
dom.removeEventListener("click",function(){
console.info("click function")
},false)
console.log(dom.eventListenerList["click"].length)
}
</script>
</head>
<body>
<button id="test" >测试</button>
</body>
</html>