1000 div s - Sie können einen Test durchführen HIER
// https://stackoverflow.com/questions/12627443/jquery-click-vs-onclick
let a= [...Array(10000)];
function clean() { test.innerHTML = ''; console.clear() }
function divFunction(el) {
console.log(clicked on: ${el.id});
}
function initA() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; a.map((x,i)=> $(#myDiv${i}`).click(e=> divFunction(e.target)));
}
function initB() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box" onclick="divFunction(this)">${i}</div>).join``;
}
function initC() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; a.map((x,i)=> document.getElementById(myDiv${i}`).onclick = e=> divFunction(e.target) );
}
function initD() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; a.map((x,i)=> document.getElementById(myDiv${i}`).addEventListener('click', e=> divFunction(e.target) ));
}
function initE() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; a.map((x,i)=> document.querySelector(#myDiv${i}`).onclick = e=> divFunction(e.target) );
}
function initF() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; a.map((x,i)=> document.querySelector(#myDiv${i}`).addEventListener('click', e=> divFunction(e.target) ));
}
function initG() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; a.map((x,i)=> window[myDiv${i}`].onclick = e=> divFunction(e.target) );
}
function initH() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; a.map((x,i)=> window[myDiv${i}`].addEventListener('click',e=> divFunction(e.target)));
}
function initI() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; [...document.querySelectorAll(.box`)].map(el => el.onclick = e=> divFunction(e.target));
}
function initJ() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; [...document.querySelectorAll(.box`)].map(el => el.addEventListener('click', e=> divFunction(e.target)));
}
function initK() {
test.innerHTML = a.map((x,i)=> <div id="myDiv${i}" class="box">${i}</div>).join`; $(.box`).click(e=> divFunction(e.target));
}
function measure(f) {
console.time("measure "+f.name);
f();
console.timeEnd("measure "+f.name)
}
test {
display: flex;
flex-wrap: wrap;
}
.box {
margin: 1px;
height: 10px;
background: red;
font-size: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>This snippet only presents used solutions. Click to solution button and then click on any red box to trigger its handler</div>
<button onclick="measure(initA)">A</button>
<button onclick="measure(initB)">B</button>
<button onclick="measure(initC)">C</button>
<button onclick="measure(initD)">D</button>
<button onclick="measure(initE)">E</button>
<button onclick="measure(initF)">F</button>
<button onclick="measure(initG)">G</button>
<button onclick="measure(initH)">H</button>
<button onclick="measure(initI)">I</button>
<button onclick="measure(initJ)">J</button>
<button onclick="measure(initK)">K</button>
<button onclick="clean()">Clean</button>
<div id="test"></div>
