Are there any pros to this use of javascript:void(0)?

[JivanAmara]

Hi all,
I usually work on website back-ends and I'm not an expert in js, but circumstances are pushing me to understand it better. I have to make updates to a web page and I found the following code:
html:

<a href='javascript:void(0)' id='extra'></a>

js:

$("#extra").on('click',function(){
    ...
})

css:

#extra {
    ...
    background: '/images/extra_image.png'
}

The aim is to display an image and have a javascript function called when it is clicked. The method used here seems very convoluted to me. What comes to mind for me would be:
html:

<img src='/images/extra_image.png' onclick='perform_image_click_stuff()' />

js:

function perfrom_image_click_stuff() {
    ...
}

Does the developer that wrote this code need some help or am I missing something here?

[JorgeM]

I agree that your example makes more sense to use. The only difference i can see is that your second example doesnt change the syle of the cursor to pointer when the user hovers over the image. However, you can take care of that in your stylesheet by doing :hover { cursor: pointer }.

Anyway in the first example, if i did want to use a hyperlink and I'm already including jQuery in my project, I would have done it like this instead...

<a href id='extra'>text</a>


<script>
$("#extra").on('click', function(event) {
    event.preventDefault();
    // do more stuff;
})
</script>