How Does Inline JavaScript (In HTML) Work

How does inline Javascript (in HTML) work?

You've got it nearly correct, but you haven't accounted for the this value supplied to the inline code.

<a href="#" onclick="alert(this)">Click Me</a>

is actually closer to:

<a href="#" id="click_me">Click Me</a>
<script type="text/javascript">
document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        alert(this);
    }).call(document.getElementById('click_me'), event);
});
</script>

Inline event handlers set this equal to the target of the event.
You can also use anonymous function in inline script

<a href="#" onclick="(function(){alert(this);})()">Click Me</a>

How does the browser identify inline JavaScripts?

Here we are not mentioning but still it is working fine and the browser identifies it. How is this happening?

Because the HTML specification defines what intrinsic event attributes like onclick mean, just as it defines what <script> means.

When to use inline and when to use embedded?

In general:

• Don't use intrinsic event attributes (like onclick="..."), bind event handlers using JavaScript (e.g. addEventListener).
• Use external script elements (like <script src="..."></script>) for most scripts, especially if they large or reused between pages.
• Consider inline script elements (like <script>...</script>) if:
  
  
  • the script is short and only applicable to a single page (you might get mild performance benefits or ease maintenance)
  • the script is designed to make data available to JavaScript (e.g. if it defines a variable containing frequently updated data and is generated from a database)

How to use inline JavaScript in HTML?

No, you can't use that approach with Javascript. There is no such thing as inline Javascript.

What you see in a link like <a href="javascript:alert(1)"> is the javascript: pseudo-protocol, similar in use to the http: protocol. When you point the browser to such an URL, the browser runs the script.

If you want to run a script in the page, you need a script tag.

How to avoid inline javascript?

How to avoid inline javascript?

One of the best ways that I can think of to avoid using inline JavaScript is to simply not script inline JavaScript.

That is, at the header/footer of your HTML doc, source an external JS file like so:

<script type="text/javascript" src="external.js"></script>

Then elsewhere in your HTML doc, put in the element to trigger your click function:

<input type="button" id="clickme" value="Click Me" />

Lastly, in external.js, put in the code to trigger your click:

$('#clickme').click(function() {
    LogToConsole("clicked");
}

By putting the JavaScript in an externel JS file, you are not writing JavaScript inline on your HTML doc. Your understanding of inline JavaScript, judging from your question, is indeed "incorrect". But by acknowledging that inline JavaScript simply means writing JS code within your HTML file, you now understand what it means to write (or not write) inline JS.

By the way, the <script> tag is not inline JS!!!! It's HTML.

---

Related Topics