<commit_before><!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title><NAME> - Technical Blog</title>

    <!-- Bootstrap Core CSS -->
    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="/css/clean-blog.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    Menu <i class="fa fa-bars"></i>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/index.html">Home</a>
                    </li>
                    <li>
                        <a href="/photography.html">Photography</a>
                    </li>
                    <li>
                        <a href="/videography.html">Videography</a>
                    </li>
                    <li>
                        <a href="/blog.html">Technical Blog</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('/img/Bathroom_dark.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="page-heading">
                        <h2>Technical Blog</h2>
                        <hr class="small">
                        <span class="subheading"></span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    
     <div class="container">
      <div class="row">
   <!--     <div class="col-lg-10 col-md-10 mx-auto" align="center"> -->
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
          <div class="post-preview">
              <a href="javascript-events"></a>
            <h3 class="post-title">
              Events and Event Handling in Javascript
              </h3>
              <p> Javascript, as isolating as it can be at times with its unexpected design choices, is beautiful because it can make web applications more receptive to user interaction. Javascript can detect user actions, such as mouse clicks or keystrokes, and respond in predetermined ways. We call these actions <strong>events</strong> and the code responsible for detecting them <strong>event handlers</strong>. Upon detecting an event, an event handler will execute some predetermined code that a developer has written to most likely make the software more engaging and pleasing.
              <br><br>
              
              An important thing that a developer must consider is the order of events. Suppose a user clicks on an element on a page and two different event handlers have been watching for this event. Suppose we have some nested rectangles on a webpage that we've attached some event handlers too.
   
              <br><br>
                  <pre>
                            -----------------------------------
                            |                   		    |
                            |	        	---------------   |   inner rectangle
                            |           	|    click <========= AND outer rectangle
                            |  	              |             |   |   event handlers will
                            |           	|             |   |   notice this event
                            |	           	---------------   |
                            |            click <=================== only outer rectangle
                            |		                	    |     event handlers will
                            -----------------------------------     notice this event
                </pre>
              <br><br>
              If we click the inner rectangle, that click event is registered and we see some code execute, as instructed by our event handler. If we click the outer rectangle, not only is the outer rectangle click event registered, but the event attached to the inner rectangle is also registered. This means that two sets of code execute at the time of the click. Which one will execute first? 
              <br><br>
                  This question is about <strong>event order</strong>. There are a few models that describe this order once an event is registered and the way it can be described is in terms of event propagation direction, or in other words if subsequent events will be registered from innermost to outermost element or from outermost to inner. When <strong>event capturing</strong> is used, our outer rectangle event will be registered first, followed by our nested rectangle. When <strong>event bubbling</strong> is used, the propagation moves in the opposite direction.
               <br><br>
               Certain browsers default to certain models, but we may have different reasons for using one or the other. <strong>Event delegation </strong>is the method of using event bubbling to attach event handlers to outer elements of the target element. This comes in handy when the event we would like to attach an event handler to does not yet exist. We will dive into this scenario in the next post.
                <br><br>                   
                Until then, may your events be handled, ordered, propagated and delegated with joy!
              </p>
            <p class="post-meta">Posted on November 17, 2018</p>
          </div>
          <hr>
          <!--<div class="post-preview">
            <a href="post.html">
              <h2 class="post-title">
                I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
              </h2>
            </a>
            <p class="post-meta">Posted by
              <a href="#">Start Bootstrap</a>
              on September 18, 2018</p>
          </div> -->
    
    <!--        
            
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"><commit_msg>Update javascript-events.html<commit_after><!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title><NAME> - Technical Blog</title>

    <!-- Bootstrap Core CSS -->
    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="/css/clean-blog.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    Menu <i class="fa fa-bars"></i>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/index.html">Home</a>
                    </li>
                    <li>
                        <a href="/photography.html">Photography</a>
                    </li>
                    <li>
                        <a href="/videography.html">Videography</a>
                    </li>
                    <li>
                        <a href="/blog.html">Technical Blog</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('/img/Bathroom_dark.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="page-heading">
                        <h2>Technical Blog</h2>
                        <hr class="small">
                        <span class="subheading"></span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    
     <div class="container">
      <div class="row">
   <!--     <div class="col-lg-10 col-md-10 mx-auto" align="center"> -->
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
          <div class="post-preview">
              <a href="javascript-events"></a>
            <h3 class="post-title">
              Events and Event Handling in Javascript
              </h3>
              <p> Javascript, as isolating as it can be at times with its unexpected design choices, is beautiful because it can make web applications more receptive to user interaction. Javascript can detect user actions, such as mouse clicks or keystrokes, and respond in predetermined ways. We call these actions <strong>events</strong> and the code responsible for detecting them <strong>event handlers</strong>. Upon detecting an event, an event handler will execute some predetermined code that a developer has written to most likely make the software more engaging and pleasing.
              <br><br>
              
              An important thing that a developer must consider is the order of events. Suppose a user clicks on an element on a page and two different event handlers have been watching for this event. Suppose we have some nested rectangles on a webpage that we've attached some event handlers too.
   
              <br><br>
                  <pre>
                    -----------------------------------
                    |                   		    |
                    |	        	---------------   |   inner rectangle
                    |           	|    click <========= AND outer rectangle
                    |  	              |             |   |   event handlers will
                    |           	|             |   |   notice this event
                    |	           	---------------   |
                    |            click <=================== only outer rectangle
                    |		                	    |     event handlers will
                    -----------------------------------     notice this event
                </pre>
              <br><br>
              If we click the inner rectangle, that click event is registered and we see some code execute, as instructed by our event handler. If we click the outer rectangle, not only is the outer rectangle click event registered, but the event attached to the inner rectangle is also registered. This means that two sets of code execute at the time of the click. Which one will execute first? 
              <br><br>
                  This question is about <strong>event order</strong>. There are a few models that describe this order once an event is registered and the way it can be described is in terms of event propagation direction, or in other words if subsequent events will be registered from innermost to outermost element or from outermost to inner. When <strong>event capturing</strong> is used, our outer rectangle event will be registered first, followed by our nested rectangle. When <strong>event bubbling</strong> is used, the propagation moves in the opposite direction.
               <br><br>
               Certain browsers default to certain models, but we may have different reasons for using one or the other. <strong>Event delegation </strong>is the method of using event bubbling to attach event handlers to outer elements of the target element. This comes in handy when the event we would like to attach an event handler to does not yet exist. We will dive into this scenario in the next post.
                <br><br>                   
                Until then, may your events be handled, ordered, propagated and delegated with joy!
              </p>
            <p class="post-meta">Posted on November 17, 2018</p>
          </div>
          <hr>
          <!--<div class="post-preview">
            <a href="post.html">
              <h2 class="post-title">
                I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
              </h2>
            </a>
            <p class="post-meta">Posted by
              <a href="#">Start Bootstrap</a>
              on September 18, 2018</p>
          </div> -->
    
    <!--        
            
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{'fraction_non_alphanumeric': 0.12823800974608873, 'fraction_numerical': 0.012182610925878431, 'mean_word_length': 1.7049947970863684, 'pattern_counts': {'":': 0, '<': 289, '<?xml version=': 0, '>': 283, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 24, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '638421', 'n_tokens_mistral': 4165, 'n_tokens_neox': 3820, 'n_words': 1356}