Why is it bad practice to use links with the javascript: “protocol”?

by

The execution context is different, to see this, try these links instead:

<a href="https://stackoverflow.com/questions/2479557/javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript: is executed in the global context, not as a method of the element, which is usually want you want. In most cases you’re doing something with or in relation to the element you acted on, better to execute it in that context.

Also, it’s just much cleaner, though I wouldn’t use in-line script at all. Check out any framework for handling these things in a much cleaner way. Example in jQuery:

$('a').click(function() { alert(this.tagName); });

More Related Contents:

  1. Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?
  2. Open URL in same window and in same tab
  3. HTML tag want to add both href and onclick working
  4. What is the difference between the different methods of putting JavaScript code in an ?
  5. Get local href value from anchor (a) tag
  6. Including both href and onclick to HTML tag
  7. How can I disable HREF if onclick is executed?
  8. anchor jumping by using javascript
  9. how to exchange variables between two HTML pages?
  10. Preserve browser window aspect ratio while shrinking [closed]
  11. How can i create html automatic change page? [duplicate]
  12. Changing website favicon dynamically
  13. Detecting input change in jQuery?
  14. Reading uploaded text file contents in html
  15. Get IFrame’s document, from JavaScript in main document
  16. fetch(), how do you make a non-cached request?
  17. How to use jQuery to select a dropdown option?
  18. How To Determine Which Submit Button Was Pressed, Form onSubmit Event, Without jQuery [duplicate]
  19. JavaScript Scale Text to Fit in Fixed Div
  20. Image manipulation and texture mapping using HTML5 Canvas?
  21. CSS3-Animate elements if visible in viewport (Page Scroll)
  22. “Scroll” to the very right of a long text input
  23. How to focus on a form input text field on page load using jQuery?
  24. Append HTML to container element without innerHTML
  25. Detect input value change with MutationObserver
  26. How do I make a move up and down when I’m scrolling the page?
  27. Hide div element when screen size is smaller than a specific size
  28. javascript close current window
  29. onclick calling hide-div function not working
  30. Owl Carousel Won’t Autoplay

Leave a Comment