<div class="Component1">
  <div class="Component1-hero">Read Me</div>
  <button>Click Me</button>
</div>

<div class="Component2">
  <div class="Component2-hero">Read Me</div>
  <button>Click Me</button>
</div>

.Component1,
.Component2 {
  width: 200px;
  height: 200px;
  background-color: #ddd;
  margin: 1rem;
  display: block;
  text-align: center;
  float: left;
}

.Component1-hero,
.Component2-hero  {
  margin: 2rem 0;
  padding: 2rem 0;
}

.Component1-button--action,
.Component2-button--action {
  color: blue;
}

.Component1--over .Component1-hero,
.Component2--over .Component2-hero {
  background-color: red;
}

$(document).ready(function() {
  $('.Component1')
    .find('button')
      .addClass('Component1-button--action')
      .click(function() { alert('HEY!'); })
    .end()
    .mouseenter(function() { $(this).addClass('Component1--over'); })
    .mouseleave(function() { $(this).removeClass('Component1--over'); })
    .addClass('initialized');
});

//------

// Event Delegation before DOM Ready
$(document).on('mouseenter mouseleave', '.Component2', function(e) {
  $(this).toggleClass('Component2--over', e.type === 'mouseenter');  
});

$(document).on('click', '.Component2', function(e) {
  alert('HEY!');
});

$(document).ready(function() {
  $('.Component2 button').addClass('Component2-button--action');
});