javascript - 如何在javascript中使用实际参数生成函数调用

Question

我现在正在使用这个

return '<img src="../images/fam/bug.gif"/ onclick="showDetails(event,\''+
         IPatient+'\',\''+
         nom +'\',\'' + 
         prenom+'\',\''+
         mesure_decision+'\',\''+
         type_mesure+'\')">';

我相信有一种更优雅的方式来写这个。

有什么建议么 ？

Answer 1

怎么样：

var img = document.createElement('img');
img.setAttribute('src', '../images/fam/bug.gif');
img.addEventListener('click', function (e) {
    showDetails(event, 'IPatient', 'nom', 'prenom', 'mesure_decision', 'type_mesure');
});
return img;

Answer 2

将它们放在一个数组中，然后使用.join()

var args = [IPatient,nom,prenom,mesure_decision,type_mesure];
return '<img src="../images/fam/bug.gif"/ onclick="showDetails(event,\''+args.join("','")+'\');">';

尽管如 Antti Haapala 所述，您确实应该正确绑定事件处理程序，而不是使用on*=""属性

一个可能的快速集成解决方案：

var img = document.createElement('img');
img.src = '../images/fam/bug.gif';
var args = [IPatient,nom,prenom,mesure_decision,type_mesure];
if(img.addEventListener) img.addEventListener('click',function(e) { showDetails.apply([e].concat(args)); });
if(img.attachEvent) img.attachEvent('onclick',function(e) { showDetails.apply([e].concat(args)); });
return img;

Answer 3

与内联相比，创建事件处理程序总是更好，因为您可以更好地控制它。

var img = document.createElement('img');
img.myInfo=[IPatient,nom,prenom,mesure_decision,type_mesure];
img.src='../images/fam/bug.gif';
img.addEventListener('click',showDetails,false);
return img;

在函数 showDetails 内

function showDetails(e){
 console.log(this.myInfo,e,e.target)
 var i=this.myInfo;
 console.log(i[0],i[1],i[2],'....');
 //if you want aslo more control here use {'IPa':IPatient,'nom':nom.....}
 // so that you can write i.IPa, i.nom.....
}

在这种情况下，如果您稍后删除图像，则可以使用 removeEventListener，但最重要的是，以后修改现有代码会更容易。

function deleteImage(e){
 delete this.myInfo
 this.removeEventListener('click',showDetails,false)
 //.... 
}

javacript 中的所有内容都是一个对象，因此您只需添加参数即可。在这种情况下，这非常有用。

IE

img[img.addEventListener?'addEventListener':'attachEvent']('click',showDetails);
img[img.removeEventListener?'removeEventListener':'detachEvent']('click',showDetails);

function showDetails(e){
 e=e||window.event;
 console.log(this.myInfo,e,e.target||e.srcElement);
}