Question

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

我在我的网页中使用了几个html，并且需要能够倾听每个人的变化＆＃39;每个事件分别选择。例如，

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

当有变化的时候＆＃39;为第一个选择做的事件，我需要做点什么。如果第二个有一个'变化'＆＃39;事件，另一件事发生。

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

编辑：问题是更多的javascript / jquery导向。我不需要改变框架或它是如何工作的（它是内部的，我无法共享它）。我有兴趣了解如何更改元素的默认事件名称。第一次和第二次投掷＆＃34;改变＆＃34;事件，我不能只听取＆＃34;改变＆＃34;因为我无法判断哪个元素触发了它。我希望选择抛出一个特定命名的事件而不是泛型＆＃34;更改＆＃34;。

Answer 1

Event creating

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

创建自定义事件。
添加自定义事件处理程序。
在您需要时发送自定义事件。

＆＃13;

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');
});

＆＃13;

<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>

＆＃13;

Answer 2

我不能只听“改变”事件，因为我无法判断哪个元素触发它

当然可以。

事件处理程序this内部是事件发生的元素，因此您可以使用this.id或$(this).attr('nativeId')或this.getAttribute('nativeId')之类的内容作为特定元素的标识符< / p>

$('select').on('change', function(){
    console.log('id =',this.id);
    console.log('nativeId =',$(this).attr('nativeId'))
})

<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>

Answer 3

以下是工作示例，如何动态addEventListener到DOM元素。也许你可能会发现它的用途。

＆＃13;

function test() {
  console.log('test');
}

function test1() {
  console.log('test1');
}

var selectors = [
  { id: 'first', eventType: 'change', cb: test },
  { id: 'second', eventType: 'change', cb: test1 }
];


//pure JS way
for (i = 0; i < selectors.length; i++) {
  var sel = selectors[i];
  document.getElementById(sel.id).addEventListener( sel.eventType, sel.cb); 
}

// ES6 way
//selectors.forEach(sel => document.getElementById(sel.id).addEventListener( sel.eventType, sel.cb )
//);

＆＃13;

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

＆＃13;

设置元素事件的名称

3 个答案: