прослушиватель одного события для нескольких событий

Question

У меня есть функция JS, которая добавляет переменное количество разделов. В каждом разделе у меня есть вход с идентификатором и именем, установленным в «type_» + i, где i - индекс раздела

 var input=document.createElement('select');
                            input.id ="type_" + i
                            input.name="type_" + i
                            input.required = true 
                            input.classList.add("selects")
                            myPre.appendChild(input);
                            var myInput = document.getElementById('type_' + i)
                            var prefix = document.createTextNode('Media Type      : ')
                            myInput.parentNode.insertBefore(prefix, myInput);
                            var option = document.createElement("option");
                            option.text = "";
                            myInput.add(option);
                            var option = document.createElement("option");
                            option.text = "IMAGE";
                            myInput.add(option);
                            var option = document.createElement("option");
                            option.text = "VIDEO";
                            myInput.add(option);
                            var option = document.createElement("option");
                            option.text = "IFRAME";
                            myInput.add(option);

Это для экрана ввода. В зависимости от того, какая опция выбрана (IMAGE, VIDEO или IFRAME), мне нужно либо загрузить файл для IMAGE или VIDEO, либо ввести ссылку для IFRAME

Это условный JS для загрузки файла

                            var input=document.createElement('input');
                            input.type="file";
                            input.id ="mediaSec_" + i
                            input.name ="mediaSec_" + i
                            input.required = true 
                            input.classList.add("files")
                            myPre.appendChild(input);
                            var myInput = document.getElementById('mediaSec_' + i)
                            var prefix = document.createTextNode('   Upload Media    : ')
                            myInput.parentNode.insertBefore(prefix, myInput);
                            //var br = document.createElement('BR')
                            //myInput.insertAdjacentElement("afterend", br);

а это условный JS для добавления адреса ссылки

var input=document.createElement('input');
                            input.type="text";
                            input.id ="link_" + i
                            input.name ="link_" + i
                            input.classList.add("links")
                            input.placeholder = "add iframe https://" 
                            myPre.appendChild(input);
                            var myInput = document.getElementById('link_' + i)
                            var prefix = document.createTextNode('   Link Address : ')
                            myInput.parentNode.insertBefore(prefix, myInput);
                            var br = document.createElement('BR')
                            myInput.insertAdjacentElement("afterend", br);

Нужно ли это делать в отдельной функции? Могу ли я сделать это с одним слушателем или мне нужен слушатель для каждого раздела? Как бы я передал идентификатор?

Answer 1

Не уверен, что вы подразумеваете под прослушивателем одного события для нескольких событий ... Я думаю, вы имеете в виду обработчик, который обрабатывает то, что происходит с событием? Если мое предположение верно, то да, вы можете сделать это, вы можете создать один обработчик и проверить тип представленного файла / ввода. Если он имеет тип image / jpeg, вы можете активировать ввод для изображений ... если это видео для видео, если его строка для iframe