我在javascript和dom上使用addEventListener

。下面的代碼我想要做的是當我追加一個tr並點擊第二個td（姓）時，第二個td值將被改變爲粗體。那麼當我再次點擊第二個td值時，它會恢復正常。我已經完成了改變它的大膽，但我不能讓它恢復正常。我知道如果我用onclick方法添加一個按鈕調用detHandler。但我不能爲此做一個按鈕。我需要再次點擊該名稱才能恢復正常。你們有什麼想法嗎？我在javascript和dom上使用addEventListener

<script type="text/javascript"> 

    function appendUser() 
    { 
    var fname=prompt("Please enter your First Name"); 
    var lname=prompt("Please enter your Last Name"); 
    var email=prompt("Please enter your Email Address"); 

    var table=document.getElementById("appendable"); 

    var tr=document.createElement("tr"); 
    var td1=document.createElement("td"); 
    var td2=document.createElement("td"); 
    td2.id="p1"; 
    var td3=document.createElement("td"); 

    td1.innerHTML = fname; 
    td2.innerHTML = lname; 
    td3.innerHTML = email; 

    tr.appendChild(td1); 
    tr.appendChild(td2); 
    tr.appendChild(td3); 
    tr.style.color="green"; 

    table.appendChild(tr); 

    addHandler(); 


    } 

    function addHandler() 
    { 
    var addH = document.getElementById('p1'); 

    if (addH.addEventListener) 
    { 
     addH.addEventListener('click', applyStyle, false); 
    } 
    else if (addH.attachEvent) 
    { 
     addH.attachEvent('onclick', applyStyle); 
    } 
    } 

    function detHandler() 
    { 
    alert("aa"); 
    var detH = document.getElementById('p1'); 

    if (detH.removeEventListener) 
    { 
     detH.removeEventListener('click', applyStyle, false); 
     detH.style.color="blue"; 
     //detH.style.fontWeight="normal"; 
    } 
    else if (detH.detachEvent) 
    { 
     detH.detachEvent('onclick', applyStyle); 
    } 
    } 

    function applyStyle() 
    { 
    var add = document.getElementById('p1'); 
    add.style.fontWeight="bold"; 
    } 

</script> 
</head> 
<body> 
<table id="appendable" width='50%' border='1'><tr><th>First Name</th><th>Last Name</th>   
<th>Email Address</th></tr> 
    </tr></table> 
    <p><button onclick="appendUser()">Append New Row</button></p> 
</body> 
</html>'

來源

2014-04-06 user3503758

只需撥動它在處理

function applyStyle(){ 
    var add = document.getElementById('p1'); 
    var curr = add.style.fontWeight; 

    add.style.fontWeight = curr != 'bold' ? 'bold' : 'inherit'; 
}

FIDDLE

來源

2014-04-06 14:26:21 adeneo

在這條線：

if (addH.addEventListener)

在W3C的模型，你不能找出一個事件是否註冊的元素或不上。

來源

2014-04-06 14:26:05 pj013

它檢查元素 – adeneo

技術上上存在的財產，它評估物業的價值無論是truthy或falsy。用'in'或'hasOwnProperty'來檢查屬性是否存在。 – Sampson

有趣...我總是這樣做：var ev = $ ._ data（element，'events'）; if（ev && ev.click）alert（'click bound'）; – pj013

您有重複的ID在你的代碼（每一行都會有一個細胞與id="pq"！）

考慮這樣的解決方案：

function appendUser() 
{ 
    var fname=prompt("Please enter your First Name"); 
    var lname=prompt("Please enter your Last Name"); 
    var email=prompt("Please enter your Email Address"); 

    var table=document.getElementById("appendable"); 

    var tr=document.createElement("tr"); 
    var td1=document.createElement("td"); 
    var td2=document.createElement("td"); 
    var td3=document.createElement("td"); 

    td1.appendChild(document.createTextNode(fname)); 
    td2.appendChild(document.createTextNode(lname)); 
    td2.setAttribute("data-toggleme","true"); // this is how we identify the cell 
    td3.appendChild(document.createTextNode(email)); 

    tr.appendChild(td1); 
    tr.appendChild(td2); 
    tr.appendChild(td3); 
    tr.style.color="green"; 

    table.appendChild(tr); 
} 
document.getElementById('appendable').onclick = function(e) { 
    e = e || window.event; 
    var t = e.srcElement || e.target; 
    while(t != this && t.nodeName != "TD") t = t.parentNode; 
    if(t.getAttribute("data-toggleme")) { 
    t.style.fontWeight = t.style.fontWeight == "bold" ? "" : "bold"; 
    } 
}

推遲這樣的事件處理程序有兩個原因：

更少的事件處理程序！使瀏覽器更快，而不必跟蹤這麼多。
它是面向未來的，你可以添加更多的行，他們將「自動」正確處理

來源

2014-04-06 14:30:00

我在javascript和dom上使用addEventListener

回答

相關問題