寫單個元素的多個事件

Question

我有一個元素的多個事件：

var paragraphe = document.getElementsByTagName('p')[0]; 
paragraphe.onclick = function(ev) { 
    ev.target.style.color = "lime"; 
} 
paragraphe.onmouseover = function(ev){ 
    ev.target.style.color = "red"; 
} 
paragraphe.ondblclick = function(ev){ 
    ev.target.style.color = 'navy'; 
} 

我想創建做事件不用其他每次重複的元素，我的意思是這樣的：

paragraphe 
.onclick = function(ev) { 
    ev.target.style.color = "lime"; 
} 
.onmouseover = function(ev){ 
    ev.target.style.color = "red"; 
} 
.ondblclick = function(ev){ 
    ev.target.style.color = 'navy'; 
} 

我該怎麼做？

Answer 1

正如@Ian說，這種類型的鏈接是不能作爲標準，而無需編寫的包裝。但在支持addEventListener（IE9 +）的瀏覽器上，您可以添加這樣的包裝。

HTML

<p>Something</p> 

的Javascript

Node.prototype.addEventListener = (function (addEventListener) { 
    return function() { 
     addEventListener.apply(this, arguments); 

     return this; 
    }; 
}(Node.prototype.addEventListener)); 

document.getElementsByTagName('p')[0].addEventListener('click', function (ev) { 
    ev.target.style.color = "lime"; 
}, false).addEventListener('mouseover', function (ev) { 
    ev.target.style.color = "red"; 
}, false).addEventListener('dblclick', function (ev) { 
    ev.target.style.color = 'navy'; 
}, false); 

在jsFiddle

也可以編寫一個函數與on + eventName工作（當然jQuery和其他已經這樣做了）的不支持它的瀏覽器。

@Ian說

爲什麼反正做這個事情？

一個很好的問題。

這裏是不支持addEventListener瀏覽器的一個可能的解決方案（不考慮舊的瀏覽器已知的bug）

的Javascript

Node.prototype.assignEvent = (function() { 
    return function (type, listener) { 
     var previousListener = this['on' + type]; 

     if (typeof previousListener === 'function') { 
      this['on' + type] = function(evt) { 
       listener(evt); 
       previousListener(evt) 
      }; 
     } else { 
      this['on' + type] = listener; 
     } 

     return this; 
    }; 
}()); 

document.getElementsByTagName('p')[0].assignEvent('click', function (ev) { 
    ev.target.style.color = "lime"; 
}).assignEvent('mouseover', function (ev) { 
    ev.target.style.color = "red"; 
}).assignEvent('dblclick', function (ev) { 
    ev.target.style.color = 'navy'; 
}); 

在jsFiddle

最後你可以將上述兩個示例合併到一個示例中，以這種方式利用現代瀏覽器上的addEventListener，而對於較舊的示例則回退到on + eventName。

Answer 2

像這樣的鏈接在Javascript中不可能沒有一些額外的工作。你可以鏈接你的事件處理程序與這樣的jQuery

$('#foo').on('mouseenter', function(){ 
    // code for mouseenter 
}).on('mouseleave', funciton(){ 
    // code for mouseleave 
}).on('click', function(){ 
    // code for click 
}).on('dblclick', function(){ 
    // code for doubleclick 
}) 

希望這會有所幫助。

Answer 3

這是可能使用jQuery：

var paragraphe=$("p"); 

paragraphe 
.click(function(e){ 
    $(e.currentTarget).css("color","lime"); 
}) 
.mouseover(function(e){ 
    $(e.currentTarget).css("color","red"); 
}) 
.dblclick(function(e){ 
    $(e.currentTarget).css("color","navy"); 
});