MouseEvent и CustomEvent не будут делать то же самое в Javascript ⇐ Html

[Anonymous]

Используя этот пример:

Код: Выделить всё

const checkbox = document.getElementById('termsCheckbox');
const submitBtn = document.getElementById('submitBtn');

checkbox.addEventListener('change', function() {
submitBtn.disabled = !this.checked;
});

checkbox.addEventListener('click', function() {
alert("checkbox/label clicked!");
});

submitBtn.addEventListener('click', function() {
alert('Form submitted!');
});

Код: Выделить всё

body {
font-family: Arial, sans-serif;
padding: 20px;
}

.container {
max-width: 300px;
margin: 0 auto;
}

label {
display: flex;
align-items: center;
margin-bottom: 15px;
cursor: pointer;
}

input[type="checkbox"] {
margin-right: 8px;
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

Код: Выделить всё

I agree to the terms

Submit

Я пытаюсь вызвать событие, используя только инструменты разработчика (chrome), поэтому, когда я выбираю элемент метки и делаю:

Код: Выделить всё

$0.dispatchEvent(new MouseEvent("click", {
bubbles: true,
}));

он ​​работает отлично, оба предупреждают: «Ярлык нажат!» И также проверяет флажок.
однако, когда я это делаю:

Код: Выделить всё

$0.dispatchEvent(new CustomEvent("click", {
bubbles: true,
}));

($0=элемент, который я выбираю сейчас в инструментах разработчика, который является ИЛИ даже )
он просто предупреждает сообщение БЕЗ проверки флажка... таким образом, не позволяя мне отправить форму (поскольку кнопка отключена).
Есть ли способ вызвать CustomEvent специально с помощью «щелчка», чтобы это было сделано оба? почему есть разница? Я не понимаю... спасибо за идеи!

Подробнее здесь: https://stackoverflow.com/questions/798 ... javascript