如何编写内联事件处理程序？答案

【问题标题】：How to write inline Event Handler?如何编写内联事件处理程序？
【发布时间】：2017-02-16 18:07:03
【问题描述】：

我在 JS 中编写了一个更改事件处理程序，但我想在 HTML 中内联编写它。我怎样才能像onchange="javascript: function() { return false; };"一样将下面的动作写成内联？

function changed(element) {
  if (element.value == 1 || element.value == 2) {
    $(element).removeClass('hide').addClass('show');
  }
}

<select class="chosen" name="content_media" style="width: 200px; display: none;" onchange="changed(this)" required="">
  <option value="default">--Select--</option>
  <option value="0">Press Ad</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
  <option value="5">option5</option>
  <option value="6">option6</option>
  <option value="7">option7</option>
</select>

【问题讨论】：

当你可以有事件处理程序时为什么内联？jquery 不是内联的正确标签
不是您问题的直接答案，但不要使用内联事件处理程序。不显眼的事件处理程序到目前为止是更好的标准。
不要使用内联样式...
在我的情况下只添加和删除类，所以我选择内联事件处理程序@guradio
仍然不是使用内联处理程序的好理由。除非您在逻辑上无法做到，否则请始终使用不显眼。另外，我很困惑您如何在隐藏的选择上引发更改事件，然后会显示出来？这个逻辑毫无意义。

标签： javascript html

【解决方案1】：

你可以只写javascript代码，例如：

onchange="alert('Value was changed to ' + event.target.value);"

这可能会使您的代码更加混乱......

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，因此最好将事件附加到 js 端而不是内联事件，例如：

$('.chosen').on('change', function(){
  var selected_value = $(this).val();

  if ( selected_value == 1 || selected_value == 2 )
     console.log(selected_value+' selected');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="chosen" name="content_media" style="width: 200px;" required="">
  <option value="default">--Select--</option>
  <option value="0">Press Ad</option>
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
  <option value="5">option5</option>
  <option value="6">option6</option>
  <option value="7">option7</option>
</select>

希望这会有所帮助。

【讨论】：