Member Avatar for RobRob666

I already have 3 Javascripts working that I trigger within my <td>'s like this:

<td onMouseOver="mover(this)" onMouseOut="mout(this)" onClick="mclick('test.html')">Test Button</td>

I have now coded up 1 Javascript function to handle all 3 events (using if statements).

But how do I trigger the calling of that function inside my <td>'s? I was hoping there would be some kind of general “onEvent” but haven’t found one:

<td onEvent="mousebutton( this, event, 'test.html' )" >Test Button</td>

(I’m assuming this is an HTML question since my Javascript per se is working. But do please let me know if this would be more appropriate in another forum.)

Thanks!

  • 2 Contributors
  • 2 Replies
  • 2K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by RobRob666

Dani AI

Generated

You can keep one function and wire it to each event, then branch on event.type. This keeps your logic in one place without inventing a generic attribute.

<td data-url="test.html">Test Button</td>

<script>
function handleCell(e) {
  const cell = e.currentTarget;
  switch (e.type) {
    case 'mouseover':  /* mover(cell); */ break;
    case 'mouseout':   /* mout(cell);  */ break;
    case 'click':      /* mclick(cell.dataset.url); */ break;
  }
}

document.querySelectorAll('td[data-url]').forEach(td => {
  ['mouseover','mouseout','click'].forEach(t =>
    td.addEventListener(t, handleCell)
  );
});
</script>

addEventListener is the standard way to register listeners, and event.type tells you which event fired. Using a data-* attribute lets you attach the URL (or any metadata) to the cell without hard-coding it in your JS. (developer.mozilla.org)

If you have many cells, delegate instead of binding to each one: add one listener on the table and act only when the click came from a matching <td>.

const table = document.querySelector('table');
table.addEventListener('click', (e) => {
  const cell = e.target.closest('td[data-url]');
  if (cell) window.location.href = cell.dataset.url;
});

This uses event bubbling to handle all clicks in one place, which scales well and simplifies teardown. (developer.mozilla.org)

UX note, echoing : keep hover/highlight purely in CSS, and reserve JS for behavior. Also, if the intent is navigation, put a real <a href="test.html"> inside the cell (or use <button> for non-navigation actions). That preserves keyboard support and works when JS is disabled. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Member Avatar for almostbob

where javascript is used, it is the initial script trappping the 3 events separately, more currently use css to change appearance on mouseover(css hover), javascsript is often disabled as a security issue
havent seen any generic onEvent handler except in tutorial pages where it is a teaching aid followed up with the list of possible events.
You could write a onevent handler, but it would add complexity and slow things down, rather than simplify and speed up

/* css for mouseover */

td { text-decoration:none; }
td:hover { background-color:#66cdaa; text-decoration:bold; }

its a pale turquoise color background, its awful , but it suits my layout

Member Avatar for RobRob666

Okay! I see how that can work. Your method is much better than mine, and I will try it. (While I have been trying to put everything possible and reasonable into CSS, I had not realized the hover could be so customized.)

Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.