この記事では主にクロージャバインドに関するインタビューの質問を紹介します。詳細なサンプルコードが記載されています。必要な方は一緒に見てみましょう。
解決すべき問題は、次の ul の各 li にクリック イベントを追加し、対応するインデックスをポップアップすることです
<ul id="text"> <li>这是第一个li</li> <li>这是第二个li</li> <li>这是第三个li</li> </ul>
答え 1: bind、現在の匿名関数を this にポイントし、そしてi をパラメーターとして使用してください。 受信
var init = function(){ var obj = document.getElementById('text'); for(var i=0;i<obj.children.length;i++){ obj.children[i].addEventListener('click',function(i){ alert(i) }.bind(this,i)) } } init();
答え 2: Closure
var init = function(){ var lis=document.querySelectorAll("#text li"); for(var i=0;i<lis.length;i++){ lis[i].onclick=(function(i){ return function(){ alert(i); }; })(i) } } init();
答え 3: 最も愚かな方法、
var init = function(){ var obj = document.getElementById('text'); for(var i=0;i<obj.children.length;i++){ obj.children[i].addEventListener('click',function(item){ var self = item.target; for(var j=0;j<obj.children.length;j++){ if(self == obj.children[j]){ alert(j); } } }) } } init();
と一致する
クロージャとバインドについてもっと共有してくださいこのインタビューの質問に関連する記事については、PHP 中国語 Web サイトに注目してください。