curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/6733691d88e3053414689276.md
In the previous lessons, you learned how to work with events by using the addEventListener() method. But there is another, not recommended way, to work with events in JavaScript.
Inline event handlers are special attributes on an HTML element that are used to execute JavaScript code when an event occurs.
Here is an example of a button element with an inline click event handler:
:::interactive_editor
<button onclick="alert('Hello World!')">Show alert</button>
:::
When the user clicks on the button, the alert function is called and an alert dialog is displayed with the message Hello World!.
Another way to use inline event handlers is to call a function that is defined in a script tag in the HTML document.
Here is an example of defining a function called changeBgColor and calling it from an inline click event handler:
:::interactive_editor
<script>
function changeBgColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
<button onclick="changeBgColor()">Change background color</button>
:::
When the user clicks on the button, the changeBgColor function is called and the background color of the page is changed to light blue. While it is possible to use inline event handlers like this, it is not considered a best practice.
For one reason, inline event handlers can only be used to attach one event listener to an element. If you want to attach multiple event listeners to the same element, you will need to use addEventListener(). Another reason is that inline event handlers mix HTML and JavaScript code together, which can make your code harder to read and maintain. It is better to keep your HTML code and JavaScript code separate by using addEventListener() to attach event listeners to elements.
Inline event handlers are not recommended for use in modern JavaScript. So, it is best practice to stick with the addEventListener() method when working with events in JavaScript.
What is an inline event handler?
A method to attach multiple event listeners to an element.
Think about how inline event handlers are implemented in HTML.
An attribute on an HTML element that executes JavaScript code when an event occurs.
A way to define functions in a separate JavaScript file.
Think about how inline event handlers are implemented in HTML.
A type of CSS styling for elements.
Think about how inline event handlers are implemented in HTML.
2
Why is it considered best practice to use addEventListener() instead of inline event handlers?
addEventListener() allows you to mix HTML and JavaScript easily.
Consider the limitations of inline event handlers.
Inline event handlers can only attach one event listener to an element.
addEventListener() is easier to write.
Consider the limitations of inline event handlers.
Inline event handlers are faster than addEventListener().
Consider the limitations of inline event handlers.
2
What is a potential drawback of using inline event handlers?
They are faster than using addEventListener().
Think about how code organization affects readability.
They require more lines of code.
Think about how code organization affects readability.
They make code harder to read and maintain by mixing HTML and JavaScript.
They can only be used with buttons.
Think about how code organization affects readability.
3