William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

Javascript Events: bind as attached

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>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1.4.2");
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
 $('#div1').append(e.type).css('color', 'red');
 $('#div1').bind('click', function(e) {
  $('#div2').append('1: ' + e.type + " in bind() 1.\n<br>");
 }).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.<br>\n");
 }).bind('click', function(e) {
  $('#div2').append("3: " + e.type+" in bind() 3.<br>\n");
 });
});
</script>
</head>
<body>
<div id="div1">Click to see Event Attach: </div>
<div id="div2"></div>
</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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: