javascriptとjqのイベント依頼
4456 ワード
今日は会社で、需要があります.ajaxを通じて、動的にデータを調べて、帰ってきて、もう一つのulのli元素に追加します.例えば、(liをクリックしてアナログを生成して、データをロードして相応のデータを生成します.イベント:クリック):
jqが提供するイベント依頼は、この問題を効果的に解決することができます.delegateとonはそれぞれの方法を提供しています.
以下はjqのap copyからの使用文書です.
on(events,[selector],[data],fn)
概要
選択要素に1つ以上のイベントを結合するイベントハンドラ関数.
on()メソッドは、現在選択されているjQueryオブジェクトの要素をバインドします.jQuery 1.7では、on()方法は、イベントハンドラをバインディングするために必要なすべての機能を提供する.古いjQuery事件の方法から変換することを助けて、see .ビnd() .delegate()と .live().削除するon()バインディングのイベントは.off()を参照してください.イベントを追加するには、一回だけ実行して、自分を削除します.one()を参照してください.
パラメータ
events,[selector],[data],fnV 1.7
events:1つまたは複数のイベントタイプは、「click」または「keydown.myPlugin」のように、スペースで区切られています.
セレクタ文字列はフィルタのトリガイベントの選択要素の後裔に使用されます.選択されたdata:イベントがトリガされた時にイベントハンドラ関数を転送します.
fn:このイベントがトリガされた時に実行される関数です.false値は、関数の簡単な書き込みをしてfalseを返しても良いです.
events-map,[selector],[data]V 1.7
events-map:文字列で表した、一つ以上のスペースで区切られたイベントタイプとオプションの名前空間、値はイベントバインディングの処理関数を表します.
セレクタの末裔要素が処理プログラムを起動する選択文字列は、選択された要素をフィルタします.選択が空か無視されている場合、選択された要素に到達すると、イベントは常にトリガされます.
data:イベントがトリガされた時にイベントハンドラ関数を転送します.
javascriptにも原生のイベント依頼があります.
DEMO:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button>create</button>
<ul id="parent">
<li class="son-1">Item 1</li>
<li class="son-2">Item 2</li>
</ul>
<script>
$(function () {
$('button').on('click', function (e) {
$('#parent').append('<li>add</li>')
});
});
</script>
</body>
</html>$('#parent li').on('click', function (e) {
alert(' ' + $(this).index() + 'li');
});// ， ， 。
$('#parent li').on('click', function (e) {
alert(' ' + $(this).index() + 'li');
});jqが提供するイベント依頼は、この問題を効果的に解決することができます.delegateとonはそれぞれの方法を提供しています.
$('#parent').delegate('li', 'click', function(event) {
console.log($(this))
});$('#parent').on('click', 'li', function (e) {
console.log($(this))
});以下はjqのap copyからの使用文書です.
on(events,[selector],[data],fn)
概要
選択要素に1つ以上のイベントを結合するイベントハンドラ関数.
on()メソッドは、現在選択されているjQueryオブジェクトの要素をバインドします.jQuery 1.7では、on()方法は、イベントハンドラをバインディングするために必要なすべての機能を提供する.古いjQuery事件の方法から変換することを助けて、see .ビnd() .delegate()と .live().削除するon()バインディングのイベントは.off()を参照してください.イベントを追加するには、一回だけ実行して、自分を削除します.one()を参照してください.
パラメータ
events,[selector],[data],fnV 1.7
events:1つまたは複数のイベントタイプは、「click」または「keydown.myPlugin」のように、スペースで区切られています.
セレクタ文字列はフィルタのトリガイベントの選択要素の後裔に使用されます.選択された
fn:このイベントがトリガされた時に実行される関数です.false値は、関数の簡単な書き込みをしてfalseを返しても良いです.
events-map,[selector],[data]V 1.7
events-map:文字列で表した、一つ以上のスペースで区切られたイベントタイプとオプションの名前空間、値はイベントバインディングの処理関数を表します.
セレクタの末裔要素が処理プログラムを起動する選択文字列は、選択された要素をフィルタします.選択が空か無視されている場合、選択された要素に到達すると、イベントは常にトリガされます.
data:イベントがトリガされた時にイベントハンドラ関数を転送します.
javascriptにも原生のイベント依頼があります.
DEMO:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" id="btn" />
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<script>
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;
if(target.nodeName.toLowerCase() == "li"){
alert(' ')
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
alert(' ')
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = iNow;
oUl.appendChild(oLi);
}
}
</script>
</body>
</html>