DOM Events Basics in JavaScript

1// Method 1: Inline event handler (not recommended)
2// <button onclick="handleClick()">Click</button>
3
4// Method 2: addEventListener (recommended)
5const button = document.getElementById('myButton');
6
7button.addEventListener('click', function(event) {
8    console.log('Button clicked!');
9    console.log('Event:', event);
10    console.log('Target:', event.target);
11});
12
13// Method 3: Named function
14function handleClick(event) {
15    console.log('Clicked!', event.target);
16}
17
18button.addEventListener('click', handleClick);
19
20// Method 4: Arrow function
21button.addEventListener('click', (e) => {
22    console.log('Arrow function handler');
23});
24
25// Method 5: Multiple events
26button.addEventListener('click', handleClick);
27button.addEventListener('mouseenter', function() {
28    console.log('Mouse entered');
29});
30button.addEventListener('mouseleave', function() {
31    console.log('Mouse left');
32});
33
34// Method 6: Remove event listener
35button.removeEventListener('click', handleClick);
36
37// Method 7: Event object properties
38button.addEventListener('click', function(e) {
39    console.log('Type:', e.type);
40    console.log('Target:', e.target);
41    console.log('Current Target:', e.currentTarget);
42    console.log('Timestamp:', e.timeStamp);
43    console.log('Bubbles:', e.bubbles);
44    console.log('Cancelable:', e.cancelable);
45});