如何将 .change 函数从 jQuery 迁移到纯 Javascript答案

【问题标题】：How to migrate a .change function from jQuery to plain Javascript如何将 .change 函数从 jQuery 迁移到纯 Javascript
【发布时间】：2011-05-11 10:54:41
【问题描述】：

我不是 JS 专家，但我认为我想做的事情很简单（至少在 jQuery 中）

我有 3 个选择

  <select id="faq" class="onchance_fill">...</select>
  <select id="pages" class="onchance_fill">...</select>
  <select id="faq" class="onchance_fill">...</select>

和一个输入（它是 advlink 插件中的一个 tinyMCE）

<input type="text" onchange="selectByValue(this.form,'linklisthref',this.value);" value="" class="mceFocus" name="href" id="href" style="width: 260px;">

我希望每次我在 3 个选择之一中更改一个值时，该选项的值将被放置在输入中。

在 Jquery 中，它会是这样的：

$('.ajax_onchance_fill').change(function() {
        data = $('.ajax_onchance_fill').val();
        $('#href').text(data);
    });

但我不能使用它。那么纯 Javascript 中的等价物是什么？

谢谢

【问题讨论】：

离开 jQuery 让你的生活变得更加艰难 - 试着问“这个 jQuery 有什么问题？”在您选择在浏览器支持方面更费力的路线之前。
你试过 $('.ajax_onchance_fill').change(function() { alert($(this).val()); }); ?为了检查更改事件是否正在触发？
虽然我同意 jQuery 是蜜蜂的膝盖，但我们不确定他为什么不能使用它，但他确实表示他不能......
@jesus.tesh - 是的，有点含糊。我的假设是，如果他开始在 jQuery 中尝试它，那么他就能够使用 jQuery，他只是没有设法让它工作。
@Nathan - 是的，我和你在一起。我不知道为什么有人会让自己不得不不使用 jQuery！ :)

标签： javascript jquery onchange

【解决方案1】：

我建议你继续使用 Jquery，因为它可以加速这种事情，但在纯 JavaScript 中，我认为你想要的看起来像这样......

 <script type="text/javascript">
  function load() {
  var elements = document.getElementsByClassName('onchance_fill');
  for(e in elements){
      elements[e].onchange = function(){
          document.getElementById('href').value = this.value;
     }       
  }
  }
</script>

【讨论】：

好的，它不工作（没有错误输出），我需要调用 load() 方法吗？
是的，就像在 Jquery 中你可能会执行 $(document).ready() 一样，你需要在 dom 完成加载后调用 load。你可以在你的身体上使用 onload="load()" 但这并不能像 Jquery 那样加载 dom
很好，它正在工作 :-) 谢谢...无论如何，纯 JS...哇，我在那个案例上错过了 jQuery ;-)

【解决方案2】：

document.getElementsByClassName("ajax_onchance_fill").onchange = function() { 
   getElementById('href').value = this.options[this.selectedIndex].text;
};

虽然我不确定它是否会起作用，因为getElementsByClassName 返回的元素不止一个。

【讨论】：

【解决方案3】：

试试这个：

$('.ajax_onchance_fill').change(function() {
        var data = $(this).val();
        $('#mytextboxid').val(data);
    });

【讨论】：

他想摆脱 jquery ;-)
@Pendo - 请参阅问题的 cmets :)

【解决方案4】：

好的，所以我意识到这个线程已经超过 8 年了，所以这个答案对于 OP（他可能很久以前就知道了）来说并不是那么多，而是对于可能对此特别感兴趣的其他人来说主题。

说了这么多，这是一个相对简单可靠的方法，你可以在 vanilla JS 中实现它：

/**
 * Since we need to listen to all three ajax_onchance_fill elements,
 * we'll use event delegation.
 * 
 */

const targetLink = document.getElementById('href'); 

    document.addEventListener('change', function(e) {

        if (!!Element.prototype.matches) { // Let's make sure that matches method is supported...

            if (e.target.matches('.ajax_onchance_fill')) {

                targetLink.textContent = e.target.value;

            }

        } else { // and if not, we'll just use classList.contains...

            if (e.target.classList.contains('ajax_onchance_fill')) {

                targetLink.textContent = e.target.value;

            }
        
        }   

    });

【讨论】：