javascript - 为元素的事件设置名称

Question

我正在使用一个内部框架，该框架使用定制的组件来触发自己的事件。该框架还有一个事件监听器，它使用主题/订阅者模式监听所有这些事件，主题是触发的事件的名称。

我在页面中使用了多个 html，并且需要能够分别监听每个选择的每个“更改”事件。例如，

<select id="first" nativeId="firstNative">
    <option>TEST</option>
    <option>TEST2</option>
</select>
<select id="second" nativeId="secondNative">
    <option>TEST3</option>
    <option>TEST4</option>
<select>

当第一次选择发生“更改”事件时，我需要做一些事情。如果第二个发生“更改”事件，则会发生另一件事。

如何为每个选择的更改事件指定自定义名称，以便我可以在框架中注册它，并且不会与其他事件混淆？

编辑:问题更面向 javascript/jquery。我不需要更改框架或其工作方式(它是内部的，我无法共享它)。我有兴趣了解如何更改元素的默认事件名称。第一个和第二个都抛出一个“change”事件，我不能只听“change”事件，因为我无法判断哪个元素触发了它。我希望选择抛出一个专门命名的事件而不是通用的“更改”。

Answer 1

Event creating

您可以将change事件更改为其他自定义事件。

1. 创建自定义事件。
2. 添加自定义事件处理程序。
3. 在需要时调度自定义事件。

var selectOneEvent = new Event('select.one.change');
var selectTwoEvent = new Event('select.two.change');

document.getElementById('first').addEventListener('change', function(){
    this.dispatchEvent(selectOneEvent);
});


document.getElementById('second').addEventListener('change', function(){
    this.dispatchEvent(selectTwoEvent);
});

document.getElementById('first').addEventListener('select.one.change', function(){
    alert('select.one.change');
});

document.getElementById('second').addEventListener('select.two.change', function(){
    alert('select.two.change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" nativeId="firstNative">
    <option>TEST</option>
    <option>TEST2</option>
</select>
<select id="second" nativeId="secondNative">
    <option>TEST3</option>
    <option>TEST4</option>
<select>