function Popup() {
this.btn = document.querySelector("h1");
this.btnHandler = e => console.log(e);
this.btn.addEventListener("click", e => this.btnHandler(e));
}
let p = new Popup();
p.btnHandler = e => console.log(111);
Есть переменная, которая хранит функцию для вызова.Вот здесь первое заблуждение. Не хранит она функцию. В переменной ссылка (указатель) на функцию, и таких ссылок-переменных может быть несколько. И когда вы делаете
pup.btnHandler = function() ..., то переменная теперь указывает на другую функцию, но старая функция, которая уже привязана - никуда не исчезает.
<svg version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
<path transform="matrix(.73872 .67401 -.66417 .74758 0 0)" d="m157.42 35.068c11.576 1.8703 23.076 1.7628 33.532-2.9604-4.8792 14.896-5.7412 28.726-0.88931 41.041-11.052-4.0573-21.8-2.0324-32.244 0.36896 4.3409-10.936 5.5631-24.43-0.39881-38.449z" fill="#a7c6cf" stroke="#49c2f4" stroke-width="2"/>
</svg>
*,:after,:before{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
а скрытие блоков в display: none, проблему производительности не решаетВы правы. Именно поэтому придумали srcset
this.function outer() {
var a = 1; // переменная в лексическом окружении ф-ии inner()
// внутри inner() можно использовать значение a
return function inner() {
console.log("a == ", a, "this == ", this);
}
}
var f1 = outer(); // f1 - функция
f1(); // a == 1, this == window или self
var f2 = f1.bind({title: "Ololo"}); // f2 - новая функция
f2(); // a == 1, this.title == "Ololo"
// получаем массив элементов с именем класса 'slider-nav__dot'
var dots = document.getElementsByClassName('slider-nav__dot');
// перебираем в цикле все элементы из массива
for (var i = 0; i < dots.length; i++) {
// ВНИМАНИЕ!!!!
// создаем анонимную, само вызывающуюся функцию
// в качестве параметра ей передается i
(function (index) {
// ВНИМАНИЕ!!!!
// внутри этой функции переданный ей i уже index.
// И если i на всех итерациях это одна и та же переменная с разными значениями
// то переменная index является самостоятельной переменной,
// со своим уникальным значением в каждой итерации цикла
// создаем функцию-слушатель события "click" она существует (ее время жизни)
// до тех пор пока не будет удалена из слушателей.
// Внутри нее используется переменная index объявленная вовне
// создавая тем самым ЗАМЫКАНИЕ. То есть для каждой итерации цикла
// переменная index не будет удалена после завершения итерации
// а будет продолжать жить как замыкание пока жива функция-слушатель ее использующая
dots[index].addEventListener("click", function () {
console.log(index);
})
})(i);
}
table{border-collapse:collapse;}
table td{border:1px solid #999;}.container{border-right:1px solid #999; border-top:1px solid #999;
display:grid; grid-template-columns:repeat(3, 1fr);}
.container div{border-left:1px solid #999; border-bottom:1px solid #999;}<div class="container">
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
<div>содержимое яцейки</div>
</div><div class="container">
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
...
</div>.container {
display: table;
border-collapse: collapse;
}
.column {
float: left;
overflow: hidden;
width: 120px;
}
.cell {
display: table-cell;
border: 1px solid red;
width: 120px;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}