事件代理js
發布時間: 2020-12-20 11:30:47
A. 原生JS如何利用冒泡減少事件的觸發，只代理
js中每一次事件的觸發,都會伴隨一個事件對象的產生
btn.addEventListener('click',function(event){
console.log(event)//event就是事件對象,它包含了很多事件相專關的屬性方法對象
})所以屬我們可以利用事件冒泡的機制來達到事件委託的目的,避免循環給多個相同的子元素綁定事件
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
letul=document.querySelector('ul')
ul.addEventListener('click',(event)=>{
lete=event||window.event//兼容處理
lettarget=e.target||e.srcElement//兼容處理
console.log(`我的文本內容是:${target.innerText}`)
})
B. js事件委託和ja事件代理有什麼區別
事件委託：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，利用冒泡的原理，把事件加到父級上，觸發執行效果
-------------------------------------------------------------------------
如果我們不想或不能夠直接操縱目標對象，我們可以利用delegate創建一個代理對象來調用目標對象的方法，從而達到操縱目標對象的目的。代理對象要擁有目標對象的引用。這就是事件代理(也就是說不會直接去操縱對象)
C. 在js中，事件代理和事件委託是什麼區別啊，怎麼解釋啊
事件代理和事件委託實際上說的是同一件事，只是站在不同的角度來說的。比如說元素A把事件處理委託給自己的父元素B去處理，那麼A就是事件委託方，而B就是事件代理方，兩者參與的實際上是同一件事。
D. 請用兩段完整的代碼說明js 中普通事件綁定和事件代理的區別並說明事件代理相對於事件綁定的優勢
普通
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<inputtype="button"id="btn"value="點擊">
</body>
<script>
document.getElementById('btn').onclick=function(){
alert(this.value)
}
</script>
</html>
委拖
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<inputtype="button"id="btn"value="點擊">
</body>
<script>
document.body.onclick=function(e){
if(e.target.id=='btn')alert(e.target.value);
}</script>
</html>
優勢
如果有大量動態生成的元素，普通的綁定方式會有很多不便，委託的方式有更好的性能和靈活性。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<inputtype="button"id="new"value="新建">
</body>
<script>
vari=0;
document.getElementById('new').onclick=function(){
varnode=document.createElement('BUTTON');
vartext=document.createTextNode('委託-'+i);
varattr_id=document.createAttribute('id');
attr_id.value='i_'+i;
node.setAttributeNode(attr_id);
node.appendChild(text);
document.body.appendChild(node);
i++;
}
document.body.onclick=function(e){
if(e.target.tagName=='BUTTON')
alert('id='+e.target.id);
}
</script>
</html>
E. js 事件委託了 之後，怎麼知道我點擊可第幾個li 或許下標
||
window.onload=function(){
varoUl=document.getElementById("ul");
varaLi=oUl.getElementsByTagName("li");
oUl.onclick=function(ev){
varev=ev||window.event;
vartarget=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li"){
varthat=target;
varindex;
for(vari=0;i<aLi.length;i++)if(aLi[i]===target)index=i;
if(index>=0)alert('我的下標是第'+index+'個');
target.style.background="red";
}
}
}
熱點內容