JavaScript catch event
<p>I have a problem.  I have too many events in my DOM. The upper layer is catching the deeper event.</p>

<p>Easy Example:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            })
            $("#second").click(function(){
                alert("second.");
            });
            $("#first").click(function(){
                alert("first.");
            });
        });
    &lt;/script&gt;
    &lt;style type="text/css"&gt;
        #first{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #second{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="first"&gt;
        &lt;div id="second"&gt;

        &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>If someone clicks on the second div, which is enclosed by the first div, both of the divs catch the event. In this situation, how can I catch just the second div's click event, and leave the first div. </p>

<p>I learnt about the event bubbling, and tunnelling in C# is that the problem.  How is this problem called?
How can I solve the problem using JavaScript and jQuery. Is the solution the same?</p>
