javascript - 問一下關于JS中this的問題。
問題描述
為什么這個地方onclick事件沒有被觸發?如果是jquery中這樣可以得到當前點擊的這個li的dom對象,那JS種不能這樣使用嗎?
$(document).ready(function(){ $('ul li').click(function(){console.log($(this));//打印出當前被點擊的li的jquery對象console.log(this);//打印出當前被點擊的li的dom對象 });});
window.onload = function(){ var lis = document.getElementsByTagName('li'); lis.onclick = function(){console.log('111');console.log(this); }}
修改:
window.onload = function(){ var lis = document.getElementsByTagName('li'); Array.from(lis).forEach(function(el) {console.log('111');console.log(this); })}
<p> <ul><li></li><li></li><li></li> </ul></p>
謝謝各位,之前都用jquery,現在重新看看js發現了很多問題。這種低級錯誤以后不會再犯了,印象深刻 ^_^ 。
問題解答
回答1:能把 你有點擊觸發這個事件么? 我在 segmentFault 可以用。
不過你代碼有點小問題 getElementsByTagName 返回的是一個類數組對象
應該遍歷他 然后把給每個元素的 onclick 賦值
回答2:不是 this 的原因。
onclick 是 DOM 的事件。但是此時的 lis 根本就不是 dom,而是 DOM 的集合。
jQuery 之所以可以處理,是因為 $('ul li') 返回的是 jQuery 對象,當在其上面調用 click 函數時,jQuery 會隱式的使用循環。
雖然 lis 很像數組,但是卻不是數組。因此可以使用 Array.from 函數把它變成真正的數組。
window.onload = function(){ var lis = document.getElementsByTagName('li'); Array.from(lis).forEach(function(el) {console.log('111');console.log(this); })}回答3:
lis = document.getElementsByTagName('li')得到的是一個數組。你應該如何綁定事件呢?
試試不要用.onclick()寫點擊事件;用addEventListener(’click’,function(){console.log(this)});添加點擊事件看看能不能觸發,我懷疑是因為你拿到lis是一個數組 onclick是不是因為這個原因不行了
回答5:第二段代碼寫的不對, lis 是一個數組,不是 dom 對象,所以設置 onclick 沒用改成這樣
window.onload = function(){ var lis = document.getElementsByTagName('li'); Array.from(lis).forEach((li) => {li.onclick = function(){ console.log('111'); console.log(this);} })}回答6:
直接用getElementsByClassName這個方法吧,把getElementsByTagName封裝了一下可以作為dom操作
function getElementsByClassName(oElm, strTagName, strClassName){ var arrElements = (strTagName == '*' && oElm.all)? oElm.all :oElm.getElementsByTagName(strTagName); var arrReturnElements = new Array(); strClassName = strClassName.replace(/-/g, '-'); var oRegExp = new RegExp('(^|s)' + strClassName + '(s|$)'); var oElement; for(var i=0; i < arrElements.length; i++){oElement = arrElements[i];if(oRegExp.test(oElement.className)){ arrReturnElements.push(oElement);} } return (arrReturnElements)}回答7:
如上圖,你的lis打印出來是一個對象數組,按照你的思路你應該遍歷lis去為每個li對象綁定onclick
相關文章:
1. mysql - ubuntu開啟3306端口失敗,有什么辦法可以解決?2. php傳對應的id值為什么傳不了啊有木有大神會的看我下方截圖3. extra沒有加載出來4. javascript - 微信網頁開發從菜單進入頁面后,按返回鍵沒有關閉瀏覽器而是刷新當前頁面,求解決?5. mysql - C#連接數據庫時一直這一句出問題int i = cmd.ExecuteNonQuery();6. mysql日期類型默認值’0000-00-00’ 報錯7. 求救一下,用新版的phpstudy,數據庫過段時間會消失是什么情況?8. mysql replace 死鎖9. windows - asp.net連接上mysql之后如何調用?比如下面的登錄驗證功能怎么實現10. android - 安卓做前端,PHP做后臺服務器 有什么需要注意的?
