Long description

Step 1:An Event Handler is defined at Design-Time by writing a callback function.

Step 2: The Event Handler is registered at Design-Time for a given event on an element by using the addEventListener method of a DOM element.

Step 3: A user or page action triggers the event at Run-Time.

Step 4: The registered handler for the event on that element is executed open parenthesis callback function is invoked close parenthesis at Run-Time.

The corresponding code involved in implementing the event handler is as follows.

Line 1: open angle bracket input type equals open double quotes submit close double quotes i d equals open double quotes b t n close double quotes close angle bracket at indentation level 0. Line 2: open angle bracket script close angle bracket at indentation level 0. Line 3: function simpleHandler open parenthesis close parenthesis open curly brace at indentation level 1. Line 4: alert open parenthesis open double quotes button was clicked close double quotes close parenthesis semicolon at indentation level 2. Line 5: close curly brace at indentation level 1. Line 6: const b t n equals document dot querySelector open parenthesis open double quotes b t n close double quotes close parenthesis semicolon at indentation level 1. Line 7: b t n dot addEventListener open parenthesis open double quotes click close double quotes comma simpleHandler close parenthesis semicolon at indentation level 1. Line 8: open angle bracket forward slash script close angle bracket at indentation level 0.

Lines 3 and 4 indicates Step 1: Event handler defined. Line 7 indicates Step 2: Event handler registered.