title: Call javascript function without inline event
body: <p>I am trying to highlight cells with user preferred colors. A user will select a cell and drag mouse to select multiple cells that they want to color with the selected color. How can I trigger the javascript function that lives in a separate file (i know I have to include the file to html file, I have done that already) when user click and drag the mouse without using inline event handlers.</p>
  
  <p>The code is there to drag and select but I would like to call this function when user click and drag cells. Before I was using google.setOnLoadCallBack to call this function, but that would call it only once. I would like user to have multiple selections. I hope I made sense.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="importance"&gt;
     &lt;label class="green"&gt;Green&lt;/label&gt;
     &lt;input type="radio" name="importance" value="green"&gt;
  
     &lt;label class="yellow"&gt;Yellow&lt;/label&gt;
     &lt;input type="radio" name="importance" value="yellow"&gt;
  
     &lt;label class="orange"&gt;Orange&lt;/label&gt;
     &lt;input type="radio" name="importance" value="orange"&gt;
  
     &lt;label class="red"&gt;Red&lt;/label&gt;
     &lt;input type="radio" name="importance" value="red"&gt;
  &lt;/section&gt;
  
  &lt;table cellpadding="0" cellspacing="0" id="our_table"&gt;
    &lt;tr&gt;
     &lt;td&gt;a&lt;/td&gt;
     &lt;td&gt;b&lt;/td&gt;
     &lt;td&gt;c&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;d&lt;/td&gt;
      &lt;td&gt;e&lt;/td&gt;
      &lt;td&gt;f&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;g&lt;/td&gt;
      &lt;td&gt;h&lt;/td&gt;
      &lt;td&gt;i&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>function select_multiple() {
    var isMouseDown = false;
    // id for all the cells that were selected at the same time
    var colorGroupId = Math.floor(Math.random() * 1000);
    var highlight = find_importance_color();
    $("#our_table td")
      .mousedown(function () {
        isMouseDown = true;
        $(this).toggleClass(highlight);
        $(this).attr("data-highlightedId", colorGroupId);
        return false; // prevent text selection
    })
    .mouseover(function () {
      if (isMouseDown) {
        $(this).addClass(highlight);
      }
    });
  
    $("#our_table td")
      .mouseup(function (event) {
      isMouseDown = false;
      // time_importance(event);
    });
  }
  
  function find_importance_color() {
      return $('#importance input[name=importance]:checked').val();
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.green {
    background-color: green;
  }
  
  .yellow {
    background-color: yellow;
  }
  
  .orange {
    background-color: orange;
  }
  
  .red {
    background-color: red;
  }
  
  table td {
    width:100px;
    height:100px;
    text-align:center;
    vertical-align:middle;
    background-color:#ccc;
    border:1px solid #fff;
  }
  </code></pre>