DevScripter

Lakshit


## Introduction:
Events play a crucial role in JavaScript, allowing us to respond to user interactions and create dynamic and interactive web applications. Understanding the phases of JavaScript events and how they propagate through the DOM (Document Object Model) is essential for effective event handling. In this blog post, we will explore the different phases of JavaScript events and discuss their usefulness in event propagation.

## Event Phases:
JavaScript events go through three distinct phases during propagation: capturing, target, and bubbling.

![Phases of event](https://github.com/penandcode/devscripter/assets/72292130/0e2268f6-93de-43a2-abcd-19a48624c427)


### a. Capturing Phase:
In the capturing phase, the event starts from the topmost ancestor element and travels down the DOM tree to the target element. This phase allows you to capture events on parent elements before they reach the target element. To demonstrate this, consider the following example:

```html
<div id="parent">
  <div id="child">
    <button id="button">Click me</button>
  </div>
</div>
```

```javascript
const parent = document.getElementById('parent');
const child = document.getElementById('child');
const button = document.getElementById('button');

parent.addEventListener('click', () => console.log('Parent clicked'), true);
child.addEventListener('click', () => console.log('Child clicked'), true);
button.addEventListener('click', () => console.log('Button clicked'), true);
```

In this example, when you click the button, the event will first trigger the capturing phase, logging "Parent clicked," "Child clicked," and "Button clicked" in that order.

### b. Target Phase:
After the capturing phase, the event reaches the target element, triggering any event listeners attached directly to it. In our previous example, if we add an event listener to the target element, it will be executed during the target phase:

```javascript
button.addEventListener('click', () => console.log('Button clicked'), false);
```

Now, when you click the button, the event will log "Button clicked" during the target phase.

### c. Bubbling Phase:
Once the target phase is complete, the event starts bubbling up the DOM tree, triggering event listeners on parent elements. This phase allows you to capture events on parent elements after they have reached the target element. To demonstrate this, consider the following example:

```javascript
parent.addEventListener('click', () => console.log('Parent clicked'), false);
child.addEventListener('click', () => console.log('Child clicked'), false);
button.addEventListener('click', () => console.log('Button clicked'), false);
```

Now, when you click the button, the event will log "Button clicked," "Child clicked," and "Parent clicked" in that order during the bubbling phase.

[](https://github.com/penandcode/devscripter/assets/72292130/b4f69ba2-ebb1-4d76-b7a7-4841dd3b3d0f)

## Usefulness and Benefits:
Understanding the phases of JavaScript events and event propagation is crucial for effective event handling. Here are some benefits and use cases:

### a. Event Delegation: 
By leveraging the capturing and bubbling phases, event delegation allows you to handle events on multiple elements efficiently. Instead of attaching event listeners to individual elements, you can attach a single event listener to a parent element and utilize event propagation to handle events on child elements.

### b. Preventing Event Bubbling: 
In some cases, you may want to prevent an event from bubbling up the DOM tree. By calling the `event.stopPropagation()` method within an event listener, you can stop the event from triggering event listeners on parent elements.

### c. Event Order and Execution: Understanding the event phases helps you control the order of event execution. By attaching event listeners during the capturing or bubbling phase, you can ensure that specific event handlers are executed before or after others.

### d. Performance Optimization: By utilizing event delegation and capturing phase, you can reduce the number of event listeners and improve performance, especially when dealing with large or dynamically changing DOM structures.

## Conclusion:
Understanding the phases of JavaScript events and event propagation is essential for effective event handling and creating dynamic web applications. By leveraging the capturing, target, and bubbling phases, you can efficiently handle events, delegate events to parent elements, control event order, and optimize performance. By mastering these concepts, you can create more interactive and responsive web experiences for your users.

Remember to experiment and practice with event handling to fully grasp the potential of event phases and event propagation. Happy coding!


Phases of JavaScript Event: Understanding and Utilizing Event Propagation

Phases of Event in JavaScript


Most of the frontend developers struggle with how to collect the data from the user and harder is to manage it. Some of us try to use third-party services offering trials to perform this task. 
But we have a better way to collect the data and handle it. We all use that service in our day-to-day life. The service we are going to use is Google Sheets :)

&nbsp;

Aren't you shocked? 😂

&nbsp;

Now, let's begin and here is a step-by-step tutorial for it:

1. **Create a Google Sheet**: The first and foremost step is to create a Google Sheet. You can use this [link](https://sheet.new/) to create a new spreadsheet. You can use any name to create the sheet and name the columns according to the details you want to collect data..
   For example, if we want to collect the name, email and contact number, then we can create the columns using the fields name, email and number.
   
![Create a Google Sheets using the above method](https://github.com/penandcode/devscripter/assets/72292130/8cfc5b9b-698e-4889-8c4f-a3641c15208a)

2. **Create a Google Apps Script**:
   
  -> Click on extensions and open Apps Script from the dropdown.

![Open App Script from the Extensions](https://github.com/penandcode/devscripter/assets/72292130/a1451ee9-9af8-49ab-8437-479bf5f69a0f)

  -> Now, rename the project name to: `Submit Form to Google Sheets`. Make sure you are using the same name in order to avoid bugs.

![Rename the Project Name](https://github.com/penandcode/devscripter/assets/72292130/05d18b43-9a79-4daa-bb44-cce60fd9e93b)
  
  -> After renaming, now delete the definition of empty function `myFunction()`. The IDE should be empty now.
  -> Now, paste the code given below:

  ```
var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  var lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    var sheet = doc.getSheetByName(sheetName)

    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    var nextRow = sheet.getLastRow() + 1

    var newRow = headers.map(function(header) {
      return header === 'timestamp' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}
  ```

3. **Run the Setup**: After adding the code in the above step, now we have to run the setup and give some authorizations.
-> For this, we have to Click on the Run after selecting the initialSetup.
 
 ![image](https://github.com/penandcode/devscripter/assets/72292130/593521bc-7ca2-441a-a800-3f57be704624)
 
-> It'll give us a popup to ask for Review permissions:

 ![image](https://github.com/penandcode/devscripter/assets/72292130/51fc6a74-e27f-4159-9bce-e0d24c9a48d7)

->   It might show you some warning like this:

   ![image](https://github.com/penandcode/devscripter/assets/72292130/310ec449-76bb-4081-94c4-c6a507fc4a1a)

-> But we have to click on advanced and allow it to go further and it'll ask for few permissions, we have to click on allow.

-> If we are getting this type of result on screen, then it means that the setup is successful:

   ![image](https://github.com/penandcode/devscripter/assets/72292130/88a9b057-e365-418b-9cb2-858c6dd2837a)

> After making all the , we need to run the `doPost()` on the submission of the form and for that thing, we have to add a trigger.

4. **Add a trigger**: In order to add a trigger, we need to follow these steps:
  -> Go to triggers, on the left sidebar and click on it and then, click on `add a new trigger`.
  -> In the `Choose which function to run`, select *doPost* and in `Select event source`, select From *spreadsheet* and in `Select event type`, select *On form submit*.
   ![image](https://github.com/penandcode/devscripter/assets/72292130/d5e07f37-a22f-493a-852f-5b03a3171ac6)
  -> Click on save and then, it may ask you for permission review again.

5. **Deploy the project**: After making all the required configuration, we need to deploy our project.
   -> Select `Web App` in Select type:
   ![image](https://github.com/penandcode/devscripter/assets/72292130/e050a967-0840-4b73-a1d7-16ba13786eba)
   -> Then, in the field of access, select `Anyone`.
   ![image](https://github.com/penandcode/devscripter/assets/72292130/51ef9c2d-0444-442c-9a15-5a2862de4c2c)
   -> Now, you'll recieve a link similar to this, copy it and store it at secure place:
   ![image](https://github.com/penandcode/devscripter/assets/72292130/cec52e32-252f-4ace-8b55-a1adcce53e16)
   
6. **HTML form**: Open the `index.html` and paste the code for the form and form handling:
   ```
      <form name="submit-to-google-sheet">
      <input name="name" type="text" placeholder="Name" required>
      <input name="email" type="email" placeholder="Email" required>
      <input name="number" type="number" placeholder="Number" required>
      <button type="submit">Send</button>
      </form>
      
      <script>
      const scriptURL = '<SCRIPT URL>'
      const form = document.forms['submit-to-google-sheet']
      
      form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
      })
      </script>
   ```

Now, you can test your form and check the output in the Google sheets.



The easiest method to collect data from HTML form and store it in Google Sheets.

HTML form to Google Sheets


Most of us use **innerText**, **innerHTML**, and **textContent** daily, but we don't know the actual difference between them. These three methods are often used for manipulating text content within the HTML elements. In this blog, we'll be exploring the differences between them.

&nbsp;

Let us try to understand it using an example:

```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerText vs innerHTML vs textContent</title>
</head>

<body>

    <div>Hello World!</div>
    
    <div id="root">
      //Content to be added by methods.
    </div>
    <script>
        
    </script>
</body>

</html>

```
&nbsp;
Initially, our code is giving this as output:

![Output without DOM methods](https://github.com/penandcode/devscripter/assets/72292130/7f389aed-e0e5-478b-8325-b54415bfedaa)


&nbsp;
Now, let us one by one use these methods and explore the differences between the three - **innerText**, **innerHTML**, and **textContent**.  
    
&nbsp;

Let us take **innerHTML** first:
  

**innerHTML** returns everything inside it including all HTML elements, child tags, and text content and it is used to add HTML to the element.
  

```

        let root = document.getElementById("root")
        root.innerHTML = `
        <p>The content is added using innerHTML method.</p>`

        console.log(root.innerHTML);

```

&nbsp;

> **innerHTML** method gives the following output:
  

![Output for innerHTML](https://github.com/penandcode/devscripter/assets/72292130/7a2a8acc-9d87-477f-93cc-b71e8d4e96e9)
  

![Console output for innerHTML ](https://github.com/penandcode/devscripter/assets/72292130/9ac9328f-f5ff-4192-af58-06911d08927c)

&nbsp;

Now, let's take the **innerText**:

**innerText** returns the text that is visible on the screen means it excludes hidden text and the tags. It shows the text as it is visible on the screen. It excludes the hidden text and the HTML tags. It is used to add the text to an element.

```

        let root = document.getElementById("root")
        root.innerText = `The content is added using innerText and
        it takes text as we want to display it on screen.`
        console.log(root.innerText);

```

&nbsp;  

>**innerText** method gives the following output:

![Output for innerText](https://github.com/penandcode/devscripter/assets/72292130/41543252-fdf8-47e1-9445-480ba96849d4)
  

![Console output for innerText ](https://github.com/penandcode/devscripter/assets/72292130/1172a475-0de9-436b-a01a-19f9d634d22f)
  
&nbsp;  

Now, it's turn for **textContent**:
  

**textContent** returns complete text including the hidden text and hidden HTML tags. It shows exactly as the code is laid out in the source code.
  

```
        let root = document.getElementById("root")
        root.textContent = `The content is added using textContent 
        and it gives the output as a text only no matter 
        if we are adding multiple blank spaces or 
        adding content in next line.`
        console.log(text.textContent);

```
  

&nbsp;

>**textContent** method gives the following output:

![Output for textContent](https://github.com/penandcode/devscripter/assets/72292130/de5b13d8-c38b-4954-adc1-b0dfe347505f)
  

![Console output for textContent ](https://github.com/penandcode/devscripter/assets/72292130/7ecc69c2-1d3d-412c-972a-417f0281cdfd)

&nbsp;


Deciding among innerText, innerHTML, and textContent relies on your particular use scenario. Every property exhibits unique behaviors concerning HTML interpretation, safety, and perceptibility. Grasping these distinctions empowers you to adeptly manage text content within the DOM, ensuring code security and user experience preservation.


Mastering JavaScript DOM Manipulation concepts 

innerText vs innerHTML vs innerText

Most of us face issues while understanding the concept of **append** and **appendChild**. Some of us also think that **append** adds the element to the adjacent while **appendChild** adds the element to the child. First of all, I would like to burst this myth. Both append as well as appendChild, adds the elements as a child only.

Then, what's the difference between them Or is there any difference between them?

Yes, there are a few differences. Let us take a look over them one by one:

**->** append method takes Node Objects as well as DOM Strings as input while appendChild supports Node Objects only.

```
<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1>
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the list.
        let list = document.createElement("ul") //Creating the list
        list.innerHTML = `
            <li>
                <p>Apple</p>
            </li>
            <li>
                <p>Banana</p>
            </li>
            <li>
                <p>Litchi</p>
            </li>`
        con.append(list) //Using append method works fine
    </script>
</body>
```

> Using the append method

```
<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1>
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the list.
        let list = document.createElement("ul") //Creating the list
        list.innerHTML = `
            <li>
                <p>Apple</p>
            </li>
            <li>
                <p>Banana</p>
            </li>
            <li>
                <p>Litchi</p>
            </li>`
        con.appendChild(list) //Using appendChild method works fine
    </script>
</body>
```

> Using the appendChild method

If we run both the codes, they are gonna give us the same output. 

![Output of appendChild and append for Node Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/auu8mm8zib17zzf3u5mw.png)

But as soon as we try to add some string using both methods, append works fine but appendChild shows an error in the console.

```
<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1>
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the name.
        con.append("Apple") //Works fine
    </script>
</body>
```

> append method gives the following output:


![Output of append for DOM String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av1upcxudkzwnu679yiu.png)


```
<body>
    <div id="container">
        <div>
            <h1>Fruits list:</h1>
        </div>
    </div>
    <script>
        let con = document.getElementById("container"); //Accessing the container to append the name.
        con.appendChild("Apple") //Throws error
    </script>
</body>
```

> appendChild method gives the following output:


![Output of appendChild for DOM String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk41v9cgyfpx012bau04.png)


Along with that, it gives an error in the console.


![Error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbl95ymmrtlw8d94mv31.png)


**->** append method can take more than one argument while appendChild supports only one.


```
let p = document.createElement("p");
p.innerHTML = "Cat"
con.append(list, p) //Using append method works fine
```
> append shows the following result:

![append result for multiple arguments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vfk03pxa3qb02q14bxy.png)


```
let p = document.createElement("p");
p.innerHTML = "Cat"
con.appendChild(list, p) //Using appendChild method appends the first element and ignores the rest.
```

> appendChild gives the following result:

![appendChild result for multiple arguments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz8m8zw7xcxzgclpp8r7.png)


**->** appendChild gives a return value but append doesn't.

```
console.log(con.append(list))
```

> append gives us the result as **undefined**.

![append result on logging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o376ezrmt8j0hp0q6ktc.png)


```
console.log(con.appendChild(list))
```
> appendChild gives us result as **DOM element**.


![appendChild result on logging](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5crh2tpnk2a8pe57qbf5.png)

In modern development, "append" is more often used due to its flexibility and its ability to append multiple elements at once. Although, "appendChild" is still useful when we are targeting to old browsers primarily.

DevScripter

Phases of Event in JavaScript

HTML form to Google Sheets

innerText vs innerHTML vs innerText

append vs appendChild