事件代理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";
}
}
}
热点内容