使用addEventListener添加子元素和事物已經出錯

在發生任何事情之前，謝謝大家抽時間去看看。我在添加事件偵聽器來解決我通常用於事件的標準匿名函數時遇到了一些問題。我想要做的是這個。我有一個下拉菜單中的錨點標籤列表。從這個下拉菜單中，我想要做的是發生onmouseover事件，並在點擊之前創建一個全新的鏈接。這是我迄今爲止更好地理解我所關注的內容。使用addEventListener添加子元素和事物已經出錯

我創建了一個全新的變量，用它來「容納」eventlistener。

var onMouseOver = document.getElementById('menuIcon');

然後接下來我做的只是創建變量，它包含了我創建的所有新元素。這裏是我的列表元素....

var newLi = document.createElement('li');

，這裏是我的錨元素...

var newA = document.createElement('a');

現在我做了什麼其次是簡單地創建開始appendingChilds與這些新創建的元素的父元素這個。

var parent = document.getElementById('ul-li-a').getElementsByTagName('li');

現在，這是我知道我搞砸了非常莊嚴。我是想我的第一個手與此事件偵聽....

onMouseOver.addEventListener('onmouseover' function() { 
parent[11].appendChild(newA); 
newA.appendChild(newLi); 
newA.innerHTML = '<a>Ken\'s Link</a>'; 
});

但後來我得到一個不錯的語法錯誤。 Uncaught SyntaxError：missing）在參數列表後面。

是的，我做錯了事，我知道你們可能會看起來很明顯，但經過二十分鐘的直接試圖找到答案，我就來了。我究竟做了什麼錯誤？

再次感謝大家花時間回答這個問題。你們是非常神派的。

編輯!!!!!!!!!!

感謝您的反饋，夥計們。我做了它的工作，現在我有最後一個問題要問這個項目完成之前。我試圖從創建新的元素相同的結果添加相同的事件偵聽器......但....

我決定的而不是製造新的匿名功能添加到我的事件監聽器......我想創建一個帶有函數聲明的新事件監聽器。以下是我對該給定函數的代碼。

function newFunction() { 
parent[11].appendChild(newLi); 
newLi.appendChild(newA); 
newA.innerHTML = '<a>DUDE!</a>'; 
};

現在，這裏是我現在爲我的事件監聽器所擁有的。

newLink.addEventListener('mouseover', newFunction(){ 
         });

但我有一個錯誤，因爲我的參數中沒有任何內容。至少，這就是我所假設的情況..這是我的錯誤。

未捕獲的語法錯誤：缺少）後的參數列表

任何考生...？我的代碼發生了什麼？

來源

2017-04-19 Kenneth McAusland

你'後缺少一個逗號'onmouseover'' – JCOC611

是啊。應該是'onMouseOver.addEventListener（'onmouseover'，function（）{' – itamar

你的事件監聽目標應該只是mouseover而不是onmouseover

onMouseOver.addEventListener('mouseover', function() {

Reference here. 另外，我對使用一個真實的事件名稱作爲變量有所保留 - 你可能想改變這種

編輯到您的編輯

如果您使用的是已命名的函數，請從喲刪除括號烏爾事件偵聽函數調用：

newLink.addEventListener('mouseover', newFunction); 

function newFunction(){ 
//code 
}

來源

2017-04-19 19:05:04

你的addEventListener應該更喜歡這個，

onMouseOver.addEventListener('mouseover', function() { 
    ...Your Code... 
});

來源

2017-04-19 19:05:57 Jason

Hey，Jason and Talemyn ..謝謝你的支持，它修復了這個問題。當你有空時，他們會介意看一看，請提前致謝，夥計們 –

看看Adam B寫過的關於使用命名函數和刪除括號的方法，它們會幫助你找到你想要的東西。 – Jason

var lists = document.querySelectorAll(".work li"), 
 
    doSomething = function() { 
 
     [].map.call(lists, function(elem) { elem.classList.remove("active") }); 
 
     this.classList.add("active"); 
 
    }; 
 
[].map.call(lists, function(elem) { 
 
    elem.addEventListener("mouseover", doSomething, false); 
 
});

li { cursor: pointer; } 
 
.active { background-color: yellow; }

<ul class="work"><li>One</li><li>Two</li><li>Three</li></ul> 
 
<ul class="work"><li>Four</li><li>Five</li><li>Six</li></ul>

來源

2017-04-19 19:08:57

Rao Asif，你能看看我的文章的編輯部分？感謝提前芽。 –

使用addEventListener添加子元素和事物已經出錯

回答

相關問題