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的浏览器，这是一个可能的解决方案（这不会考虑旧的浏览器已知错误）

的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链接您的eventhandler

$('#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");
});

为单个元素编写多个事件

3 个答案: