Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vanilla JS delegated event listener" />
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Vanilla JS delegated event</title>
</head>
<body>
​
  <h1>EventTarget.addDelegatedEventListener</h1>
​
  <p>
    <code>
      <em>target</em>.addDelegatedEventListener(<em>type</em>, <em>selector</em>, <em>listener</em>[, <em>useCapture</em>]);
    </code>
  </p>
  
  <dl>
    <dt>type</dt>
    <dd>A string representing the event type to listen for.</dd>
    
    <dt>selector</dt>
    <dd>A string representing the selector to test.</dd>
    
    <dt>listener</dt>
    <dd>The object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.</dd>
    
    <dt>useCapture</dt>
    <dd>If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. If not specified, useCapture defaults to false.</dd>
  </dl>
  
  
  <div class="example">
    <h3>Example</h3>
​
    <p>
      <pre>document.addDelegatedEventListener('click', '.clickable', clickHandler);
​
var rightBox = document.querySelector('.alert-warning');
rightBox.addDelegatedEventListener('click', "[rel='clickableInside']", clickHandler);</pre>
    </p>
    <div class="row">
      <div class="col-xs-6 clickable">
        <div class="alert alert-info">
          clickable
          <div class="alert alert-success" rel="clickableInside">
                not clickable inside
              </div>
        </div>
      </div>
      <div class="col-xs-6 notClickable">
        <div class="alert alert-warning">
          not clickable
          <div class="row">
            <div class="col-xs-6">
              <div class="alert alert-success" rel="clickableInside">
                clickable inside
              </div>
            </div>
            <div class="col-xs-6">
              <div class="alert alert-success" rel="clickableInside">
                clickable inside
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <kbd id="console">jsbin.com/lugim/2 ~</kbd>
  </div>
  
</body>
</html>
 
(function(document, EventTarget) {
  var matcher = 'matches';
​
  if (!Element.prototype.hasOwnProperty(matcher)) {
    ['webkit', 'moz', 'ms', 'o'].forEach(function(prefix) {
      if (Element.prortype.hasOwnProperty(prefix + 'MatchesSelector')) {
        matcher = prefix + 'MatchesSelector';
      }
    });
  }
​
  EventTarget.prototype.addDelegatedEventListener = function(eventName, selector, fn, useCapture) {
    this.addEventListener(eventName, function(event) {
      var element = event.target;
      while (element && element !== this) {
        if (element[matcher](selector)) {
          fn.call(element, event, selector);
          break;
        }
        element = element.parentElement;
      }
    }, useCapture || false);
  };
}(document, window.EventTarget));
​
​
/**
 Example usage below
 **/
var cons = document.getElementById('console');
​
function slice(arr) {
  return [].slice.call(arr);
}
​
function clickHandler(evt, selector) {
  cons.textContent += '\n  clicked: ' + selector;
}
​
document.addDelegatedEventListener('click', '.clickable', clickHandler);
​
var rightBox = document.querySelector('.alert-warning');
rightBox.addDelegatedEventListener('click', "[rel='clickableInside']", clickHandler);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hontaspro
0viewers