JavaScript jQuery Basics Working with jQuery Collections Stopping the Browser's Default Behavior

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Samantha Atkinson
Front End Web Development Techdegree Student 27,329 Points

Event Delegation or Event Propagation? When we append the $pdfCheckbox variable to the parent element #links (div)

const $odd = $('a:odd');
const $secureLinks = $('a[href^="https://"]');
const $pdfLinks = $('a[href$=".pdf"]');
//5.We creates a variable to hold our html
const $pdfCheckbox = $("<label><input type='checkbox'> Allow PDF downloads</label>");

$secureLinks.attr('target', '_blank');

$pdfLinks.attr('download',true);
$secureLinks.addClass('secure');
//Add Flag Locked the pdfLinks 
$pdfLinks.addClass('pdf'); 
//1. Adding a click event to the PDF link using the ON Method
$pdfLinks.on('click', function(event){

  //1. Check that checkbox is clicked
     //2. If zero checkboxes are checked 
  if ($(':checked').length === 0) {

    //2A. prevent download of document
    event.preventDefault();
   //3. Alert the user
    alert('Please check the box to allow PDF Downloads');
  }

});
//7. We appended our variable checkbox to the parent element
$('#links').append($pdfCheckbox);

So what are we doing on the last line Event Delegation or Event Propagation? Or neither? lol

1 Answer

Steven Parker
Steven Parker
203,990 Points

You might call this "DOM Manipulation", and this operation isn't directly related to events. The "append" method adds additional content, typically other elements, to an existing element in the DOM. In this case, it's adding the checkbox which was previously coded in HTML.

For more details, see the jQuery documentation for .append().

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree
Samantha Atkinson
Front End Web Development Techdegree Student 27,329 Points

Thank you Steven, yes you just confirmed what I thought after posting the question. Delegation and Propagation are related to Events. And you just clarified that that last line is DOM Manipulation.