Transforming jQuery into classic JavaScript traditions

Question

Transforming jQuery into classic JavaScript traditions

I want to convert the code below into pure JavaScript.

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('savedPlayer')) {
    event.preventDefault();
    let searchText = event.target.textContent.replace(" ", "%20");
    console.log(searchText);
    //resetState();
    //renderPlayerBtns();
    //searchBallDl(searchText);
    //searchYouTube(searchText);
    //searchGiphy(searchText);
  }
});

div {
  height: 20px;
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class='savedPlayer'>savedPlayer 1</div>
<div class='savedPlayer'>savedPlayer 2</div>
<div class='other'>other</div>

I have some specific questions regarding the click event. Can a JS event listener have multiple arguments passed into it? What is the JS alternative to $(this)?

Appreciate the assistance!

javascript

Answer 1

Answer №1

When delegating the click event to .savedPlayer, you can apply the same approach with delegate event.

Since it triggers the click event on every element within the document, it's essential to verify if it is the intended target using

if (event.target.classList.contains('savedPlayer'))

.

Instead of using $(this).text(), you can opt for event.target.innerText. Similarly, if you were using $(this).html(), you should now use event.target.innerHTML.

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('savedPlayer')) {
    event.preventDefault();
    let searchText = event.target.innerText.replace(" ", "%20");
    console.log(searchText);
  }
});

div {
  height: 20px;
  border: 1px solid;
}

<div class='savedPlayer'>savedPlayer 1</div>
<div class='savedPlayer'>savedPlayer 2</div>
<div class='other'>other</div>

Edit Following the advice of @VLAZ, the code has been updated to a more generalized delegate event.

function delegate(eventName, selector, handler) {
  document.addEventListener(eventName, function(event) {
    if (event.target.matches(selector)) {
      handler(event);
    }
  });
}

delegate('click', '.savedPlayer', function(event) {
  event.preventDefault();
  let searchText = event.target.innerText.replace(" ", "%20");
  console.log(searchText);
});

delegate('click', '.other', function(event) {  
  alert(event.target.innerText);
});

div {
  height: 20px;
  border: 1px solid;
}

<div class='savedPlayer'>savedPlayer 1</div>
<div class='savedPlayer'>savedPlayer 2</div>
<div class='other'>other</div>

Answer 2

When delegating the click event to .savedPlayer, you can apply the same approach with delegate event.

Since it triggers the click event on every element within the document, it's essential to verify if it is the intended target using

if (event.target.classList.contains('savedPlayer'))

.

Instead of using $(this).text(), you can opt for event.target.innerText. Similarly, if you were using $(this).html(), you should now use event.target.innerHTML.

document.addEventListener('click', function(event) {
  if (event.target.classList.contains('savedPlayer')) {
    event.preventDefault();
    let searchText = event.target.innerText.replace(" ", "%20");
    console.log(searchText);
  }
});

div {
  height: 20px;
  border: 1px solid;
}

<div class='savedPlayer'>savedPlayer 1</div>
<div class='savedPlayer'>savedPlayer 2</div>
<div class='other'>other</div>

Edit Following the advice of @VLAZ, the code has been updated to a more generalized delegate event.

function delegate(eventName, selector, handler) {
  document.addEventListener(eventName, function(event) {
    if (event.target.matches(selector)) {
      handler(event);
    }
  });
}

delegate('click', '.savedPlayer', function(event) {
  event.preventDefault();
  let searchText = event.target.innerText.replace(" ", "%20");
  console.log(searchText);
});

delegate('click', '.other', function(event) {  
  alert(event.target.innerText);
});

div {
  height: 20px;
  border: 1px solid;
}

<div class='savedPlayer'>savedPlayer 1</div>
<div class='savedPlayer'>savedPlayer 2</div>
<div class='other'>other</div>

Answer 3

Answer №2

To enhance your 'savedPlayer' elements with a listener and retrieve the clicked element from within the callback function, follow these steps:

document.querySelector('.savedPlayer').addEventListener(
    'click',
    function() {
        alert(event.target.innerHTML);
    }
);

Answer 4

To enhance your 'savedPlayer' elements with a listener and retrieve the clicked element from within the callback function, follow these steps:

document.querySelector('.savedPlayer').addEventListener(
    'click',
    function() {
        alert(event.target.innerHTML);
    }
);

Answer 5

Answer №3

This isn't the traditional JavaScript from the early days when jQuery was created, lacking the modern features we have now. However, what you see here is a Vanilla JS adaptation of your code snippet.

I implemented deferred event handling using a function that takes a class name as a parameter. Give it a try (only the button "two" will respond to clicks):

document.querySelector('body').addEventListener('click',evHandler("savedPlayer"));

function evHandler(cls){
 return function(ev){
  if (ev.target.classList.contains(cls)) {
   ev.preventDefault();
   let searchText = ev.target.textContent.replace(" ", "%20");
   console.log('action with: '+searchText);
  }
 }
}

<button class="test">one</button>
<button class="savedPlayer">two</button>

Answer 6

This isn't the traditional JavaScript from the early days when jQuery was created, lacking the modern features we have now. However, what you see here is a Vanilla JS adaptation of your code snippet.

I implemented deferred event handling using a function that takes a class name as a parameter. Give it a try (only the button "two" will respond to clicks):

document.querySelector('body').addEventListener('click',evHandler("savedPlayer"));

function evHandler(cls){
 return function(ev){
  if (ev.target.classList.contains(cls)) {
   ev.preventDefault();
   let searchText = ev.target.textContent.replace(" ", "%20");
   console.log('action with: '+searchText);
  }
 }
}

<button class="test">one</button>
<button class="savedPlayer">two</button>

Answer 7

Answer №4

When it comes to handling events, event.target is a popular choice. Here is an example of how you can use it:

document.addEventListener('click', function (event) {
    event.preventDefault();
    let searchQuery = event.target.innerHTML.replace(" ", "%20");
    ...
});

If you have multiple arguments to handle, you can create a separate function and call it in your onclick event.

Answer 8

When it comes to handling events, event.target is a popular choice. Here is an example of how you can use it:

document.addEventListener('click', function (event) {
    event.preventDefault();
    let searchQuery = event.target.innerHTML.replace(" ", "%20");
    ...
});

If you have multiple arguments to handle, you can create a separate function and call it in your onclick event.

Transforming jQuery into classic JavaScript traditions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Updates to the AngularJS model are not appearing in the user interface

Verification is required for additional elements within the div block once a single checkbox has been selected

Is it possible to simultaneously run watchify and node-sass watch together?

Incorporate child routes within a React component

Using an array of references in React

Using JavaScript to detect the Facebook like button on a webpage

Ways to incorporate External JS and CSS files into Angular 5 (loading files with a delay)

Error: The axios instance for the app is not defined in Vue.js 3

Sharing state between two functions in React using Hooks

Customizing Vue: Implementing an automatic addition of attributes to elements when using v-on:click directive

Having trouble retrieving information from the JSON data received from the Google Place Search API

Is there a way to invoke a function using $scope within HTML that has been inserted by a directive in AngularJS?

Styling of checkboxes in jQuery Mobile is missing after an AJAX request

Tips for utilizing the find function with nested documents in MongoDB in conjunction with Next.js?

Exploring the process of iterating through a JSON post response and displaying its contents within image divs

Guide on printing in an Ionic application using print.js without the need to open the printer setup page

Unexpected glitch: three.js texture turns completely black

Displaying JavaScript values one by one using a for loop and alert

Steps to add an SVG to a DIV when clicked

Instantly summing up two numbers with javascript