In JavaScript, events are actions that happen in an app. They’re triggered by various things like inputs being entered, forms being submitted, and changes in an element like resizing, or errors that happen when an app is running, etc. We can assign event handler to handle these events. Events that happen to DOM elements can be handled by assigning an event handler to properties of the DOM object for the corresponding events. In this article, we will look at the ondragleave and ondragover event handlers and how to use them.

ondragleave

The ondragleave property of a DOM element let us set the an event handler function to handle the dragleave event. The dragleave event is fired when the dragged element or text selection leave a valid drop target. For example, we can check where the draggable box is moving away from by adding the following HTML code:

<p id='drag-leave-tracker'></p>  
<div id='drag-box' draggable="true">  
</div>  
<div id='drop-zones'>  
  <div id='drop-zone'>  
  </div>
  <div id='drop-zone-2'>  
  </div>  
</div>

The code above is better than passing in dragBox directly into appendChild since it’s much more generic than the original version of the event handler function. We can attach it to any draggable object we want. For example, if we have more than one draggable div element like in the following HTML code:

<div id='drag-box' draggable="true">  
</div>
<div id='drag-box-2' draggable="true">  
</div>
<div id='drop-zone'>  
</div>

And we change the CSS to style both draggable div elements like in the code below:

#drag-box {  
  width: 100px;  
  height: 100px;  
  background-color: red;  
}

#drag-box-2 {  
  width: 100px;  
  height: 100px;  
  background-color: green;  
}

#drop-zone {  
  width: 200px;  
  height: 200px;  
  background-color: purple  
}

Then we can write the following JavaScript code to use one ondragleave event handler function to handle the dropping of both draggable div elements like we have in the code below:

const dragBox = document.getElementById('drag-box');  
const dropZone = document.getElementById('drop-zone');  
const dropZone2 = document.getElementById('drop-zone-2');  
const dragLeaveTracker = document.getElementById('drag-leave-tracker');

const dragEnterHandler = (e) => {  
  if (e.toElement.id.includes('drop-zone')) {  
    e.toElement.appendChild(document.getElementById('drag-box'));  
  }  
}

const dragLeaveHandler = (e) => {  
  if (e.toElement.id.includes('drop-zone')) {  
    dragLeaveTracker.innerHTML = `Leaving ${e.target.id}`;  
  }  
}

dropZone.ondragenter = dragEnterHandler;  
dropZone.ondragleave = dragLeaveHandler;  
dropZone2.ondragenter = dragEnterHandler;  
dropZone2.ondragleave = dragLeaveHandler;

In the code above, we created a dragLeaveHandler function, which has an e parameter with the DragEvent object to get the DOM element that the draggable element is moving away from. It can also move away from itself since it’s also a valid drop target. We only care about moving away from the 2 drop-zone div elements so we added a check if the ID of the element that it’s moving away from with the e.toElement.id.includes(‘drop-zone’) line. Then we set the innerHTML property of the dragLeaveTracker DOM element to display which one the 2 div elements the drag-box div is moving away from.

Also, we have the dragEnterHandler to handle the actual dropping of the drag-box element into the drop-zone div element by using the appendChild method to append the drag-box inside the drop-zone div .

ondragover

We can assign an event handler to the ondragover property of a DOM element to handle the dragover event, which is triggered when an element or text selection is being dragged over a valid drop target every few hundred milliseconds. For example, we can add the following HTML code to add a p element for displaying the ID of the element that the draggable element is dropped into, a draggable div element and 2 div elements that we can drop the draggable div element into, by writing the following code:

<p id='drag-over-tracker'></p>  
<div id='drag-box' draggable="true">  
</div>  
<div id='drop-zones'>  
  <div id='drop-zone'>  
  </div>
  <div id='drop-zone-2'>  
  </div>  
</div>

Then we style the elements we have in the HTML code by changing the color and the size of each div with the following CSS code:

#drag-box {  
  width: 100px;  
  height: 100px;  
  background-color: red;  
}

#drop-zones {  
  display: flex;  
}

#drop-zone {  
  width: 200px;  
  height: 200px;  
  background-color: purple  
}

#drop-zone-2 {  
  width: 200px;  
  height: 200px;  
  background-color: green;  
}

We put the 2 div elements that we can drop our draggable div into side by side by using the display: flex property and value. Then we can assign our own event handler function to the ondragover property of our 2 div elements where we can drop our draggable div element into by writing the following code:

const dragBox = document.getElementById('drag-box');  
const dropZone = document.getElementById('drop-zone');  
const dropZone2 = document.getElementById('drop-zone-2');  
const dragOverTracker = document.getElementById('drag-over-tracker');

const dragEnterHandler = (e) => {  
  if (e.toElement.id.includes('drop-zone')) {  
    e.toElement.appendChild(document.getElementById('drag-box'));  
  }  
}

const dragOverHandler = (e) => {  
  console.log(e);  
  if (e.toElement.id.includes('drop-zone')) {  
    dragOverTracker.innerHTML = `Dragging over  ${e.target.id}, coordinate (${e.clientX}, ${e.clientY})`;  
  }  
}

dropZone.ondragenter = dragEnterHandler;  
dropZone.ondragover = dragOverHandler;  
dropZone2.ondragenter = dragEnterHandler;  
dropZone2.ondragover = dragOverHandler;

In the code above, we have the dragOverHandler function to handle the dragover event for the drop-zone and drop-zone-2 div elements. When the drag-box div element is dragged over one of the drop-zone div elements, we can see that the console.log statement inside the dragOverHandler function outputs data multiple times if we keep the drag-box div over either of the drop-zone divs . This is because the dragover event is fired every few milliseconds when we drag a draggable element over a valid drop target, which are the 2 drop-zone div elements. As long as we drag it over either of the 2 div elements, we will see new output from the console.log . Also, as we move drag-box inside either of the 2 drop-zone div elements, the coordinate that the drag-box within the screen will also be updated as it’s being moved by the mouse or touchscreen. We will see the ID of the div element that the drag-box is dragged over by getting the value of the e.toElement.id property and we also get the ID the drag-box is dragging over from the e parameter. The e parameter is an DragEvent object, which has properties like the drag coordinates with the clientX and clientY properties and the element being dragged over with the toElement property.

Also, we have the dragEnterHandler to handle the actual dropping of the drag-box element into the drop-zone div element by using the appendChild method to append the drag-box inside the drop-zone div .

The ondragleave property of a DOM element let us set the an event handler function to handle the dragleave event. The dragleave event is fired when the dragged element or text selection leave a valid drop target. It’s handy for getting which drop target element the element being dragged is leaving. We can assign an event handler to the ondragover property of a DOM element to handle the dragover event, which is triggered when an element or text selection is being dragged over a valid drop target every few hundred milliseconds. It’s handy for identifying which element we’re dragging over as well as getting the coordinates on the screen that the element being dragged is in.

Shared workers are special web workers that can be accessed by multiple browser contexts like browser tabs, windows, iframes, or other workers, etc.

They’re different from dedicated workers in that they are instances of SharedWorkers and have a different global scope.

All browser contexts must be within the same domain in accordance with the same-origin policy.

In this article, we’ll look at the characteristics of shared and workers and how to create one.

Characteristics of Shared Workers

The difference between dedicated and shared workers is that dedicated workers can only be accessed by one script. Shared workers can be accessed by multiple scripts even if each page run inside different windows.

This enables more flexible communication between multiple scripts.

The scripts that access the workers can do so by accessing it through the MessagePort object created using the SharedWorker.port property. If the onmessage event is attached using addEventListener , then the port is manually started using the start method.

When the port is started multiple scripts can post messages to the worker and handle messages sent using the port.postMessage and port.onmessage respectively.

Other than that, scripts still communicate with the shared worker by communication messages to the worker and get messages back from the worker via scripts.

The SharedWorker constructor also takes an option object with the following options:

• type : a string specifying the type of worker to create. The value can be classic or module and defaults to classic .
• credentials : a string specifying the type of credentials to use for the worker. The value can be omit (no credentials required), same-origin or include . If it’s not specified, the type is class then omit is the default.
• name : a string specifying the identifying name for the SharedWorkerGlobalScope representing the scope of the worker. It’s mainly used for debugging.

The constructor will throw a SecurityError if it’s not allowed to start workers, like if the URL is invalid or same-origin policy is violated.

NetworkError is raised if the MIME type of the worker script is incorrect.

SyntaxError is raised is the worker’s URL can’t be parsed.

Creating and Using a Shared Worker

We can create a shared worker and use it without too much hassle. First, we have to create a shared worker. Then we have to create the scripts to use it. Finally, we add the HTML so that we can do something with it.

Start by creating a scripts folder and add a sharedWorker.js file:

onconnect = (ev) => {  
  const [port] = ev.ports; 
  port.onmessage = e => {  
    const [first, second] = e.data;  
    let sum = +first + +second;  
    if (isNaN(sum)) {  
      port.postMessage("Both inputs should be numbers");  
    }  
    else {  
      const workerResult = `Result: ${sum} `;  
      port.postMessage(workerResult);  
    }  
  };  
};

In the code above, we have an onconnect handler assigned to the onconnect property. Then inside the handler function, we get the port that the shared worker uses to communicate with other scripts.

Next, we assign an event handler to the onmesaage property of the port that we got from the parameter of the onconnect handler. Then we can get the data from the parameter of the onmessage handler to and compute the sum.

Inside the handler, we check if both pieces of data sent from the external scripts are numbers and then add the numbers together if they’re and send them to the scripts.

We have to call port.start(); inside the onconnect event handler at the end if we want to use addEventListener to add a listener to the message event instead of assigning an event handler to onmessage .

Other we send a message back to the external scripts indicating that one or not pieces of data sent aren’t a number.

Then we create a main.js and main2.js in the script.js and add:

const sharedWorker = new SharedWorker("scripts/sharedWorker.js");  
const first = document.getElementById("number1");  
const second = document.getElementById("number2");  
const result = document.getElementById("result");  
sharedWorker.port.start();  
first.onkeyup = () => {  
  sharedWorker.port.postMessage([first.value, second.value]);  
};

second.onkeyup = () => {  
  sharedWorker.port.postMessage([first.value, second.value]);  
};

sharedWorker.port.onmessage = e => {  
  result.textContent = e.data;  
};

We get the input from the HTML file which we’ll create and then send it to our shared worker. We have to use the port of the shared worker to do this as we do by using sharedWorker.port.postMessage .

In:

sharedWorker.port.onmessage = e => {  
  result.textContent = e.data;  
};

We get back the data sent from the shared worker.

Both main.js and main2.js do the same thing but they’re used by different pages.

Finally, create index.html and index2.html and add:

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Add Worker</title>  
  </head>  
  <body>  
    <form>  
      <div>  
        <label for="number1">First Number</label>  
        <input type="text" id="number1" value="0" />  
      </div>  
      <div>  
        <label for="number2">Second Number</label>  
        <input type="text" id="number2" value="0" />  
      </div>  
    </form>  
    <p id="result">Result</p>  
    <script src="scripts/main.js"></script>  
  </body>  
</html>

In the end, we get:

When we go to index.html or index2.html . We should be able to do calculations on both pages without them interfering with each other.

Creating a shared worker isn’t too different from creating and dedicated worker. The constructor arguments are exactly the same. The only difference is that we can use it with more than one script and we need to get the port object to communicate between external scripts and shared workers.