js中のイベント依頼まとめ

1,何が事件の依頼ですか?分かりやすく言えば、事件はonclick、onmouseover、onmouseout、などはイベントです.依頼は他の人にさせることです.この事件は本来はいくつかの要素に加えられていますが、他の人に加えて、この事件を完成させます.
つまり、泡が発生する原理を利用して、事件を父のレベルに加えて、実行効果を触発します.
性能を向上させます.
彼らの背景色を変えるために各liをトリガする必要がある例を見ることができます.

<ul id="ul">
	<li>aaaaaaaali>
	<li>bbbbbbbbli>
	<li>ccccccccli>
ul>

window.onload = function(){
	var oUl = document.getElementById("ul");
	var aLi = oUl.getElementsByTagName("li");

	for(var i=0; ifunction(){
			this.style.background = "red";
		}
		aLi[i].onmouseout = function(){
			this.style.background = "";
		}
	}
}

 このように、liの上にマウスのイベントを追加することができます.
しかし、多くのliがforサイクルを使うと、性能に影響があります.
このような効果はイベント依頼で実現できます.変わらない

window.onload = function(){
	var oUl = document.getElementById("ul");
	var aLi = oUl.getElementsByTagName("li");

/*
        ：event   ，   ，        ，               。
ie：window.event.srcElement
   :event.target
nodeName:        
*/
	oUl.onmouseover = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "red";
		}
	}
	oUl.onmouseout = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "";
		}
	}
}

利点2は、新たに追加された要素は、前のイベントがあります.
私たちはこの例を見ますが、ダイナミックな追加liをします.ブロックをクリックして動的にliを追加します.
例えば:

<input type="button" id="btn" />
<ul id="ul">
	<li>aaaaaaaali>
	<li>bbbbbbbbli>
	<li>ccccccccli>
ul>

 事件を依頼しないでください.こうします.

window.onload = function(){
	var oUl = document.getElementById("ul");
	var aLi = oUl.getElementsByTagName("li");
	var oBtn = document.getElementById("btn");
	var iNow = 4;
	for(var i=0; ifunction(){
			this.style.background = "red";
		}
		aLi[i].onmouseout = function(){
			this.style.background = "";
		}
	}

	oBtn.onclick = function(){
		iNow ++;
		var oLi = document.createElement("li");
		oLi.innerHTML = 1111 *iNow;
		oUl.appendChild(oLi);
	}

	
}

 このようにして、ボタンを押して新しいliの上にマウスが移動していないことが見えます.彼らの背景色を変えます.
クリックして追加すると、forサイクルはすでに実行済みです.
私たちはイベント依頼の方式でやります.変わらない

window.onload = function(){
	var oUl = document.getElementById("ul");
	var aLi = oUl.getElementsByTagName("li");
	var oBtn = document.getElementById("btn");
	var iNow = 4;

	oUl.onmouseover = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "red";
		}
	}
	oUl.onmouseout = function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;
		//alert(target.innerHTML);
		if(target.nodeName.toLowerCase() == "li"){
		target.style.background = "";
		}
	}
	oBtn.onclick = function(){
		iNow ++;
		var oLi = document.createElement("li");
		oLi.innerHTML = 1111 *iNow;
		oUl.appendChild(oLi);
	}
}