JavaScript事件处理程序(事件侦听器)
2011-08-04 00:00
1091 查看
我们知道,javascript与HTML之间的交互是通过事件来实现的,事件就是用户或浏览器自身执行的某种动作,比如click、mounseover、load……,而响应事件的函数就叫做事件处理函数(或事件侦听器)。
event util test
var eventUtil = {
addListener: function(element, type, hander) {
if (element.addEventListener) {
element.addEventListener(type, hander, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, hander);
} else {
element['on' + type] = hander;
}
},
getEvent: function(event) {
return event || window.event;
//return event ? event : window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeListener: function(element, type, hander) {
if (element.removeEventListener) {
element.removeEventListener(type, hander, false);
} else if (element.deattachEvent) {
element.detachEvent(type, hander);
} else {
element['on' + type] = null;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
baidu
(function() {
var btn = document.getElementById("btn");
var link = document.getElementsByTagName("a")[0];
eventUtil.addListener(link, "click", function(event) {
alert("prevent default event");
var event = eventUtil.getEvent(event);
eventUtil.preventDefault(event);
});
eventUtil.addListener(btn, "click", function(event) {
var event = eventUtil.getEvent(event);
var target = eventUtil.getTarget(event);
alert(event.type);
alert(target);
eventUtil.stopPropagation(event);
});
eventUtil.addListener(document.body, "click", function() {
alert("click body");
});
})();
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
event util test
var eventUtil = {
addListener: function(element, type, hander) {
if (element.addEventListener) {
element.addEventListener(type, hander, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, hander);
} else {
element['on' + type] = hander;
}
},
getEvent: function(event) {
return event || window.event;
//return event ? event : window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeListener: function(element, type, hander) {
if (element.removeEventListener) {
element.removeEventListener(type, hander, false);
} else if (element.deattachEvent) {
element.detachEvent(type, hander);
} else {
element['on' + type] = null;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
baidu
(function() {
var btn = document.getElementById("btn");
var link = document.getElementsByTagName("a")[0];
eventUtil.addListener(link, "click", function(event) {
alert("prevent default event");
var event = eventUtil.getEvent(event);
eventUtil.preventDefault(event);
});
eventUtil.addListener(btn, "click", function(event) {
var event = eventUtil.getEvent(event);
var target = eventUtil.getTarget(event);
alert(event.type);
alert(target);
eventUtil.stopPropagation(event);
});
eventUtil.addListener(document.body, "click", function() {
alert("click body");
});
})();
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- JavaScript高级程序设计学习笔记--事件(一)(事件流、事件处理程序/事件侦听器)
- javascript中的事件处理程序(事件侦听器)javascript
- JavaScript高级程序设计学习笔记--事件(一)(事件流、事件处理程序/事件侦听器)
- 读《Javascript高级程序设计》中的javascript事件处理程序(事件侦听器)心得
- javascript中的事件处理程序(事件侦听器)
- JavaScript事件处理程序(事件侦听器)
- JavaScript 事件流、事件处理程序、事件侦听器、冒泡
- JavaScript:事件流与事件处理程序
- JavaScript的事件处理程序
- javascript练习:8-9事件处理程序的返回值
- 理解JavaScript事件以及事件处理程序——笔记整理
- 探究JavaScript中的五种事件处理程序
- javascript中对各种事件处理程序的个人总结
- JavaScript 事件处理程序
- 探究JavaScript中的五种事件处理程序方式
- 事件处理程序实现的另一种方法:浏览器的事件监听机制实现“1事件对应n事件处理程序”(Javascript)
- JavaScript:事件处理程序
- javascript事件处理程序
- javascript事件处理------hml事件处理程序、dom0事件处理程序、dom2事件处理程序
- JavaScript中的事件:事件处理程序