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

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

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中的所有内容都是一个对象，因此您只需添加参数即可。在这种情况下，这非常有用。

即

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

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

3 个答案: