In [ ]:

    

from nbfiddle import Fiddle


    

In [ ]:

    

%%html

<div id="c1">
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
</div>

<script type="text/javascript">


    $(document).ready(function()
        {
            var element = $('#c1');
            var sel_elem = element.find('select');
            
            sel_elem.change(function(ev)
            {
                var sel_option = sel_elem.find("option:selected").val();
               
                console.log('Selection changed: ' + sel_option);
            });
        });


</script>


    

In [ ]:

    

%%html

<!-- http://my.safaribooksonline.com/book/programming/javascript/9781457189821/14dot-handling-events/propagation_html -->
<p class="e1">A paragraph with a <button>button</button>.</p>

<script>
  var para = document.querySelector("p.e1");
  var button = document.querySelector("p.e1 button");
    
  para.addEventListener("mousedown", function() {
    console.log("Handler for paragraph.");
  });
  button.addEventListener("mousedown", function(event) {
    console.log("Handler for button.");
    if (event.which == 3)
      event.stopPropagation();
  });
</script>


    

In [ ]:

    

Fiddle(

    html = """
<button>A</button>
<button>B</button>
<button>C</button>
""", 
    
    js = """
document.body.addEventListener("click", function(event) {
if (event.target.nodeName == "BUTTON")
  console.log("Clicked", event.target.textContent);
});
"""

)


    

In [ ]:

    

# turning off defaultEvent

Fiddle(

    html = """
<p>Links:</p>
<ul>
<li><a href="https://www.wikidata.org/wiki/Wikidata:Main_Page">Can't follow this link</a></li>
<li><a href="https://www.wikidata.org/wiki/Wikidata:Main_Page">Can't follow this link (2)</a></li>
</ul>
""",

    js = """
    element.find('a').each(function(){
        this.addEventListener('click', function (event){
           console.log(event);
           event.preventDefault();
        })
    })
    
    """
)


    

In [ ]:

    

# http://my.safaribooksonline.com/book/programming/javascript/9781457189821/iidot-browser/ch13_html#X2ludGVybmFsX0h0bWxWaWV3P3htbGlkPTk3ODE0NTcxODk4MjElMkZtb3VzZV9jbGlja3NfaHRtbCZxdWVyeT0=

Fiddle(
    
    css = """
.dot {
    height: 8px; width: 8px;
    border-radius: 4px; /* rounds corners */
    background: blue;
    position: absolute;
}    
    """,
    div_css = """
    
height: 200px;
background: beige;    
    
    """,

    js = """
addEventListener("click", function(event) {
    var dot = document.createElement("div");
    dot.className = "dot";
    dot.style.left = (event.pageX - 4) + "px";
    dot.style.top = (event.pageY - 4) + "px";
    document.body.appendChild(dot); 
})
    """    
)


    

In [ ]: