Функция самоиспускания JavaScript на addEventListener

Question

Я не могу использовать функцию прослушивателя событий самостоятельно и слушатель работать.

Следующий код выполняет функцию, но Слушатель события не работают:

window.addEventListener("resize", (function() { 
document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth 
})()) 

функция установит необходимый (динамический с самого начала) CSS стиля, необходимой для сайта форматирования. Функция «resize» ДОЛЖНА выполняться при загрузке. Возможно ли это сделать, или я должен создать отдельную функцию Self Invoking и вызвать ее на прослушивателе событий?

Answer 1

Когда вы немедленно вызываете функцию, ее возвращаемое значение помещается в свое место (window.addEventListener('resize', undefined)). Вместо этого определите свою функцию за пределами прослушивателя событий, затем добавьте ее и вызовите.

function onResize() { 
    document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth; 
} 
window.addEventListener('resize', onResize); 
onResize(); 

Технически, вы могли бы сделать эту работу с помощью самостоятельного вызова функции, но это немного выпивший, и я не хотел бы предложить его.

window.addEventListener('resize', (function onResize() { 
    document.getElementById('divMenu').innerHTML = document.getElementById("divTop").offsetWidth; 
    // Works because it returns a function 
    return onResize; 
})()); 

Answer 2

Ваш IIF возвращает неопределенный, но eventlistener должен быть функцией или ссылкой на функцию. Добавить возврат к вашему IIF или передать функции:

Anonymous функция:

window.addEventListener("resize", function() { 
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth 
})) 

IIF, который возвращает функцию

window.addEventListener("resize", (function() { 
return function(){ 
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth 
} 
})()) 

редактируется (вызвать задание при запуске):

window.addEventListener("resize", (function() { 
    function set_innerHtml(){ 
    document.getElementById("divMenu").innerHTML = document.getElementById("divTop").offsetWidth 
    } 
    set_innerHtml(); 
    return set_innerHtml; 
})()) 

Answer 3

По какой-то причине я наполнен ненавистью при виде своих собеседников. aka:

function imAFunctionNeedlesslyAssignedGlobally(){ 
    display.textContent = input.value; 
} 
button.addEventListener('click', imAFunctionNeedlesslyAssignedGlobally); 
imAFunctionNeedlesslyAssignedGlobally(); 

Это просто выглядит уродливым и страшным. Возможно, я немного придирчив, но, тем не менее, я просто ненавижу это и его товарищеские хакерские решения для решения этой проблемы. Поразмышляя об этом немного, я придумал это. И мой о, мой мой код выглядит намного лучше, чем результат.

Function.prototype.runAndReturnSelf = function(){ 
    this(...arguments); 
    return this; 
}; 

button.addEventListener('click', function(){ 
    display.textContent = input.value; 
}.runAndReturnSelf()); 

Плюсы:

• Deliciously простой
• Изысканно явно
• Просто посмотрите на эту анонимную функцию! Идеальный обзор!
• минус 2 строки кода на событие слушателя

Cons:

• Ни одно, что я могу сразу думать о