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}`)
})