js事件代理
❶ js事件委托和ja事件代理有什么区别
事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,利用冒泡的原理,把事件加到父级上,触发执行效果
-------------------------------------------------------------------------
如果我们不想或不能够直接操纵目标对象,我们可以利用delegate创建一个代理对象来调用目标对象的方法,从而达到操纵目标对象的目的。代理对象要拥有目标对象的引用。这就是事件代理(也就是说不会直接去操纵对象)
❷ 请用两段完整的代码说明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>
❸ js change 事件怎么委托
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这专个事件本属来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
❹ 原生javascript 怎么事件代理 addeventlistener
事件代理就复好比,有一个小队制,共十人,给其中一人绑上一个大喇叭,你要找张三的时候,直接告诉绑上大喇叭的人,大喇叭一喊:咱们队伍中叫张三的给我出来。这个过程就叫做事件代理。
http://www.cnblogs.com/ARMdong/articles/javascript_delegate.html
❺ 用JS添加的DIV,无法触发onclick事件 请求帮助
先注册事件,再添加div,是不行的。 用on去注册事件。
看下版这个,有没有帮助:权 http://jingyan..com/article/36d6ed1f9f46a71bcf488304.html
❻ JavaScript 用事件解耦有什么劣势
主要是事复件管理了,如果制是一个复杂交互
全部用事件代理会导致事件管理的混乱,就不知道事件的触发点了,假设过多的代码中产生了事件冒泡,那么我想导致的执行问题会暴露出来
所以个人思考如果要解决这种问题,sam模型是比较好的,通过状态触发,剩下的只需要管理组件状态即可
❼ 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";
}
}
}
❽ 如何使用javascript的事件代理
事件代理:
用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。
当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现。使用事件代理,我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以得知这个事件是从哪个元素开始的。
❾ 在js中,事件代理和事件委托是什么区别啊,怎么解释啊
事件代理和事件委托实际上说的是同一件事,只是站在不同的角度来说的。比如说元素A把事件处理委托给自己的父元素B去处理,那么A就是事件委托方,而B就是事件代理方,两者参与的实际上是同一件事。
❿ 原生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}`)
})