Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > N6+ event bubble?

Reply
Thread Tools

N6+ event bubble?

 
 
Jesse Wade
Guest
Posts: n/a
 
      08-19-2004
Hello all. In N6+ is it possible to have a whole bunch of TD cells
in a table and have a click event handler on the TABLE object that identifies
the clicked cell?

I don't want to have individual click handlers on each TD as the page
will become too large.

So the concept would be something like:

<SCRIPT language="javascript">
function OnClick(E){
alert( some code that identifies the value of the clicked cell );
}
</SCRIPT>

<TABLE onclick="Onclick();">
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD><TD>5</TD></TR>
<TR><TD>6</TD><TD>7</TD><TD>8</TD><TD>9</TD><TD>10</TD></TR>
<TR><TD>11</TD><TD>12</TD><TD>13</TD><TD>14</TD><TD>15</TD></TR>
<TR><TD>16</TD><TD>17</TD><TD>18</TD><TD>19</TD><TD>20</TD></TR>
<TR><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD><TD>25</TD></TR>
<TR><TD>26</TD><TD>27</TD><TD>28</TD><TD>29</TD><TD>30</TD></TR>
<TR><TD>31</TD><TD>32</TD><TD>33</TD><TD>34</TD><TD>35</TD></TR> etc...
</TABLE>
 
Reply With Quote
 
 
 
 
Yann-Erwan Perio
Guest
Posts: n/a
 
      08-19-2004
Jesse Wade wrote:

> Hello all. In N6+ is it possible to have a whole bunch of TD cells
> in a table and have a click event handler on the TABLE object that identifies
> the clicked cell?


Yes, and this is actually the approach I prefer, since it permits to
control the entry point in the code (conditional init) and facilitates
the maintenance.

> <TABLE onclick="Onclick();">


This was your biggest problem; the construct you've used is similar to:

myTable.onclick = function(event) {
Onclick();
}

The onclick attribute value is in fact wrapped into an anonymous
function, which holds the event object, named "event"; you need to pass
this event object to your inner handler, in order to be able to
determine the original target.

Once you have the event, you'll have to pay attention to its target:
- it can be a text node, in which case you have to go up until
you find the TD,
- it can be a TD,
- it could be an intermediate element (like TR, TBODY) or the table
itself (if clicked on a border, for instance).


---
<script type="text/javascript">
var buf=[];
for(var ii=0; ii<10; ii++){
buf.push("<tr>");
for(var k=1; k<=10; k++){
buf.push("<td id='td"+(k+ii*10)+"'>"+(k+ii*10)+"<\/td>");
}
buf.push("<\/tr>");
}
document.write(
"<table id='MyTable' onclick='foo(event, this)'>"+
buf.join("") +
"<\/table>"
);

function foo(evt, table){
var el;
evt=evt||window.event;
el=evt.target||evt.srcElement;

for(;el&&el!=table;el=el.parentNode)
if(el.nodeName.toLowerCase()=="td")
break;

alert(el.id); //either the td or an intermediate element
}
</script>
---


HTH,
Yep.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
image button click event fires before click event of button Purvi T ASP .Net 0 10-19-2004 06:19 AM
Catching a RequiredFiled Validator event in PageLoad or some other event? Lars Netzel ASP .Net 3 07-22-2004 10:48 PM
Button.Init? how Do I know if click event has been fired? TextBox.TextChanged event before Button.Click in a CompositeCustomControl. jorge ASP .Net 2 05-25-2004 11:45 PM
PreRender Event occurs immediatley after Load event =?Utf-8?B?QWxpcmV6YSBaaWFp?= ASP .Net 1 02-09-2004 10:19 AM
Event On Form From Control Event Dave Wurtz ASP .Net 1 12-09-2003 10:37 PM



Advertisments