jQuery - Basic Click Events

Basic jQuery Click Event handler. Includes simple data handling and event prevention.

by Kev

HTML

<a href="google.com"> Link to Google</a>
<a class="disabled" href="google.com"> Link to Google (click event prevented)</a>

<p>This is a a clickable paragraph</p>
<button>Click me</button>
<input type="text" value="no input yet">

CSS

a {
  display: block;
}

JavaScript

$('button').on("click", function(e) {
  console.log('Button clicked');
  console.log(this); // Displays BUTTON element HTML
  console.log(e);
  console.log(e.currentTarget.innerHTML);
  console.log(this.innerHTML);

});

// .click() is shorthand for  .on("click"...

$('p').click(function(e) {
  var element = $(this); // turn the DOM element into a jQuery object 
  console.log(element);
  
  // Following 2 lines return the HTML DOM element - <p>This is a clickable paragraph</p>
  console.log(element.context);
  console.log(this); // Displays P element HTML
  
  // Following 2 lines return the innerHTML - 'This is a a clickable paragraph'
  console.log(e.currentTarget.innerHTML);
  console.log(this.innerHTML);
});


$('a').click(function(e) {
  console.log(this);
  var elem = $(this)
  if ( elem.hasClass('disabled')) {
        e.preventDefault();
				alert('This link has been disabled!');
    }
    
});

$('input').click(function(e) {
  console.log('Input clicked');
  console.log(this); // Displays INPUT element HTML
  console.log(e);
  console.log(e.currentTarget.innerHTML);

  console.log(e.currentTarget.value); //These 2 lines return the same value
  console.log(this.value);
});