Javascript Events: bind as attached
Blogs20112011-03-28
Here I wrote a simple snippet to demo the Javascript events that appends to the even listeners, instead of replace. When bind() a new event to a target, the event is appended to the target, the following codes add 3 ‘click’ events to a target ‘div1’:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
http://www.google.com/jsapi
google.load("jquery", "1.4.2");
$(document).ready(function() {
$('#div1').append(e.type).css('color', 'red');
$('#div1').bind('click', function(e) {
$('#div2').append('1: ' + e.type + " in bind() 1.n");
}).bind('mouseover', function() {
$(this).css('color', 'red');
}).bind('mouseout', function() {
$(this).removeAttr('style');
});
$('#div1').bind('click', function(e) {
$('#div2').append("2: " + e.type+" in bind() 2.n");
}).bind('click', function(e) {
$('#div2').append("3: " + e.type+" in bind() 3.n");
});
});
</head>
<body>
Click to see Event Attach:
</body>
</html>When click, the results from 3 ‘click’ events are executed and display sequently. So by default, Javascript events are appended to original events; will sequently execute when triggerring the event.