从链接 onclick 将参数传递给 JS function

Question

I have a link that looks like this:

<a id="mylink" onclick="deleteHike( 3 );" href="javascript:void(0);">Yes</a>

It is able to call this JavaScript:

window.onload = function()
{

  //Get a reference to the link on the page
  // with an id of "mylink"
  var a = document.getElementById("mylink");

  //Set code to run when the link is clicked
  // by assigning a function to "onclick"
  a.onclick = function( hike_id )
  {
     // Somecode her
     // But when I try to use the hike_id it displays as [object MouseEvent] 
  }
}

But the value that comes in is [object MouseEvent], not the number that I was expecting. Any idea why this happens and how to fix this? :)

Thanks!

Answer 1

You are trying to assign the function to your link in two different and conflicting ways.

Using the eval-ed function string, onclick = "function(value)" , works but is deprecated.

The other way of binding the click handler in the onload event works too, but if you want a particular value to be passed, you'll have to change your script a bit because the value as given in the initial onclick is completely lost when you set the onclick to a new function.

To make your current method work, you don't need an onload handler at all. You just need this:

function deleteHike(hike_id) {
   // Some code here
}

To do it the second way, which I recommend, it would look like this:

<a id="mylink" href="javascript:void(0);">Yes</a>

with this script:

function deleteHike(e, hike_id) {
   // Some code here
   // e refers to the event object which you can do nifty things with like
   //  - learn the actual clicked element if it was a parent or child of the `this` element
   //  - stop the event from bubbling up to parent items
   //  - stop the event from being captured by child items
   //   (I may have these last two switched)
}

function getCall(fn, param) {
   return function(e) {
      e = e || window.event;
      e.preventDefault(); // this might let you use real URLs instead of void(0)
      fn(e, param);
   };
}

window.onload = function() {
   var a = document.getElementById("mylink");
   a.onclick = getCall(deleteHike, 3);
};

The parameter of a DOM event function is the event object (in Firefox and other standards-compliant browsers). It is nothing in IE (thus the need to also grab window.event). I added a little helper function for you that creates a closure around your parameter value. You could do that each time yourself but it would be a pain. The important part is that getCall is a function that returns a function , and it is this returned function that gets called when you click on the element.

Finally, I recommend strongly that instead of all this, you use a library such as jQuery because it solves all sorts of problems for you and you don't have to know crazy JavaScript that takes much expertise to get just right, problems such as:

• Having multiple handlers for a single event
• Running JavaScript as soon as possible before the onload event fires with the simulated event ready . For example, maybe an image is still downloading but you want to put the focus on a control before the user tries to use the page, you can't do that with onload and it is a really hard problem to solve cross-browser.
• Dealing with how the event object is being passed
• Figuring out all the different ways that browsers handle things like event propagation and getting the clicked item and so on.

Note: in your click handler you can just use the this event which will have the clicked element in it. This could be really powerful for you, because instead of having to encode which item it was in the JavaScript for each element's onclick event, you can simply bind the same handler to all your items and get its value from the element. This is better because it lets you encode the information about the element only in the element, rather than in the element and the JavaScript.

Answer 2

The first parameter in javascript event is the event itself. If you need a reference back to the "a" tag you could use the this variable because the scope is now the "a" tag.

Answer 3

You should just be able to declare the function like this (no need to assign on window.onload ):

function deleteHike(hike_id)
{
     // Somecode her
     // But when I try to use the hike_id it displays as [object MouseEvent] 
}

Answer 4

Here's my new favorite way to solve this problem. I like this approach for its clarity and brevity.

Use this HTML:

<a onclick="deleteHike(event);" hike_id=1>Yes 1</a><br/>
<a onclick="deleteHike(event);" hike_id=2>Yes 2</a><br/>
<a onclick="deleteHike(event);" hike_id=3>Yes 3</a><br/>

With this JavaScript:

function deleteHike(event) {
    var element = event.target;
    var hike_id = element.getAttribute("hike_id");
    // do what you will with hike_id
    if (confirm("Delete hike " + hike_id + "?")) {
        // do the delete
        console.log("item " + hike_id + " deleted");
    } else {
        // don't do the delete
        console.log("user canceled");
    }
    return;
}

This code works because event is defined in the JavaScript environment when the onclick handler is called.

For a more complete discussion (including why you might want to use "data-hike_id" instead of "hike_id" as the element attribute), see: How to store arbitrary data for some HTML tags .

These are alternate forms of the HTML which have the same effect:

<a onclick="deleteHike(event);" hike_id=4 href="javascript:void(0);">Yes 4</a><br/>
<button onclick="deleteHike(event);" hike_id=5>Yes 5</button><br/>
<span onclick="deleteHike(event);" hike_id=6>Yes 6</span><br/>

Answer 5

When you assign a function to an event on a DOM element like this, the browser will automatically pass the event object (in this case MouseEvent as it's an onclick event) as the first argument.

Try it like this,

a.onclick = function(e, hike_id) { }