Javascript 事件/序列问题 : why does this event fire?

Question

我的应用程序中的一个页面有一些简单的用户首选项 - 例如，“登录/注销”。

页面显示复选框...然后更新它们以显示用户的实际偏好(选中/未选中)。

然后我想添加一个监听器以确保我捕获对此首选项的任何更改。

在下面的代码中(在“就绪”部分，因此它会在页面加载时运行)我首先更新 HTML 以显示正确的开/关，然后为同一元素创建一个监听器以捕获任何后续更改。

我显然不理解事件/冒泡 - 当此页面加载第一段代码时，会更新复选框，然后触发监听器...但由于代码的顺序，监听器尚不存在。

我已经尝试了很多方法来阻止复选框的初始设置触发事件 - 下面代码中的 stopPropagation。没有任何效果 - 由于这个事件监听器，我对我的服务器进行了不必要的更新。

感谢帮助/指导。

if (arrUserData.userPrefWordLog === 1){
    $('#logMode').prop('checked', true).change(function (e) {
      console.log('ON - stop prop...2');
      e.stopPropagation();
    });
  } else {
    console.log('OFF - stop prop...1');
    $('#logMode').prop('checked', false).change(function (e) {
      console.log('OFF - stop prop...2');
      e.stopPropagation();
    });
  }

  console.log('Now set listener for CHANGE to wordPrefs...');
  // $('body').on('change', '.wordPref1', function () {
  $('#logMode').change(function () {
    console.log('Fire change to logMode...');
    updatePrefs();
  });

Answer 1

这是我在评论中提到的例子。它在纯 JS 中，我假设您可以弄清楚如何在 jQuery 中应用以适合您的代码。父容器上有一个更改事件监听器。控制台将通过显示 bool 值显示更改了哪个元素以及是否选中或未选中。

如果在父容器上使用单个监听器不符合您的目的，此代码仍应说明您不需要在更新最后保存的用户首选项的代码中的单个元素上使用两个更改事件监听器。

希望对您有所帮助。

我添加了示例的第二个版本，它不需要 matches 方法或按类或 ID 在 DOM 中搜索每个单独的复选框。如果您可以以类似的方式构造 HTML 和保存用户偏好的数据对象，则可以遍历 DOM 并利用 HTML 数据属性进一步简化代码。

第一个例子

"use strict";

let userPref_1 = 1, 
    userPref_2 = 0,
    userPref_3 = 1;

// Restore last selected user settings.

document.querySelector('.set_1').checked = userPref_1 === 1 ? true : false;
document.querySelector('.set_2').checked = userPref_2 === 1 ? true : false;
document.querySelector('.set_3').checked = userPref_3 === 1 ? true : false;

// Add change event listener to parent container.
document.querySelector('.parSet').addEventListener( 'change', chg_evt, false );

function chg_evt(evt)
  {
    let e = evt.target;
    if ( e.matches( '.set_1' ) )
       { console.log( 'Element set_1 changed to : ' + e.checked ); }
    else if ( e.matches( '.set_2' ) )
       { console.log( 'Element set_2 changed to : ' + e.checked ); }
    else if ( e.matches( '.set_3' ) )
       { console.log( 'Element set_3 changed to : ' + e.checked ); };

    // Invoke update user preferences function here.

  } // close chg_evt

<div class="parSet">
<label><input class="set_1" type="checkbox" role="button" unchecked>Setting One</label>
<label><input class="set_2" type="checkbox" role="button" unchecked>Setting Two</label>
<label><input class="set_3" type="checkbox" role="button" unchecked>Setting Three</label>
</div>

第二个例子

let userPrefs = [ 1, 0, 1 ], 
    p = document.querySelector('.parSet'),
    C = p.children,
    c, f;

// Restore last selected user settings.
for ( c of C )
 { 
   f = c.firstElementChild;
   f.checked = userPrefs[ f.dataset.i ] === 1 ? true : false;
 };

// Add change event listener to parent container.
p.addEventListener( 'change', chg_evt, false );

function chg_evt(evt)
  {
    let e = evt.target;
    console.log( 'User preference ' + ( parseInt(e.dataset.i) + 1 ) + ' changed to : ' + e.checked );     

    // Invoke update user preferences function here updatePrefs( e.dataset.i, e.checked) if needed.

  } // close chg_evt

<div class="parSet">
<label><input data-i="0" type="checkbox" role="button" unchecked>Setting One</label>
<label><input data-i="1" type="checkbox" role="button" unchecked>Setting Two</label>
<label><input data-i="2" type="checkbox" role="button" unchecked>Setting Three</label>
</div>