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="for http://stackoverflow.com/q/18103391/1048479" />
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="uwrapper" class="wrapper">
     <button id="unordered">Unordered</button>
  (Bubble will fire first click)
  </div>
​
    <div id="owrapper" class="wrapper">
     <button  id="ordered">Ordered</button>
        (Capture will fire first click)
  </div>
  <div id="log"></div>
​
</body>
</html>
 
#uwrapper {
  background:#444;
}
#owrapper {
  background:#777;
}
 
var log = (function (id) {
  var ele = document.getElementById(id);
  
  return function (message) {
    var li = document.createElement('li');
    li.innerHTML = message;
    ele.appendChild(li);
  }
})('log');
​
document.getElementById('uwrapper').addEventListener('click', function () { log('unordered Wrapper bubble (2)'); }, false);
document.getElementById('uwrapper').addEventListener('click', function () { log('==unordered \n Wrapper capture (1)'); }, true);
​
document.getElementById('unordered').addEventListener('click', function () { log('unordered Button bubble (3)'); }, false);
document.getElementById('unordered').addEventListener('click', function () {log('unordered Button capture (4)'); }, true);
​
​
​
document.getElementById('owrapper').addEventListener('click', function () { log('== ordered \n Wrapper capture (1)'); }, true);
​
document.getElementById('ordered').addEventListener('click', function () { log('ordered Button capture (2)'); }, true);
document.getElementById('ordered').addEventListener('click', function () { log('ordered Button bubble (3)'); }, false);
document.getElementById('owrapper').addEventListener('click', function () { log('ordered Wrapper bubble (4)'); }, false);
Output

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

Dismiss x
public
Bin info
NickTomlinpro
0viewers