Javascript事件處理中的問題

Question

直到今天，我才弄清楚事件傳播是如何工作的，並開始在我現有的代碼庫上進行測試，但是arghhhhhhh該死的你是javascript ......對你來說似乎沒有那么簡單：X

這是我的問題，我在錨點上定義了一組事件：

theLink.setAttribute('onMouseOver','doSomething(this)');    **// works**

theLink.addEventListener("mouseout", function(event){doSomethingElse(event)}, false);  **// does not work**

theLink.onmouseout = function(event){doSomethingElse(event)};     **// does not work**

僅當我像第一個示例中那樣定義事件時，它才似乎在第二個或第三個定義中也起作用。 但是我不能使用該定義，因為我必須傳遞事件對象。

有什么提示嗎？ 我正在使用Firefox。

Answer 1

所有這三個都使用以下代碼（在firefox中）為我工作：

HTML：

<a id="link1">Link 1</a>
<a id="link2">Link 2</a>
<a id="link3">Link 3</a>

JS：

var link1 = document.getElementById("link1");
var link2 = document.getElementById("link2");
var link3 = document.getElementById("link3");

window.doSomething = function(event) {
    console.log(event);
}

link1.setAttribute('onMouseOver', 'doSomething(this)');

link2.addEventListener("mouseout", function(event) {
    doSomething(event)
}, false);

link3.onmouseout = function(event) {
    doSomething(event)
};

這是一個工作的jsfiddle： http : //jsfiddle.net/magicaj/qk6wU/

您可能還會考慮使用類似jQuery的庫來處理跨瀏覽器與某些版本IE不支持的addEventListener方法不兼容的問題，JS看起來像這樣：

$("#link1").mouseover(doSomething);
$("#link2").mouseover(doSomething);
$("#link3").mouseover(doSomething);

Answer 2

包含跨瀏覽器的答案

function doSomething( event ) {
    if( console && console.log ) {
        console.log( this );
        console.log( event );
    }
    else {
        alert( this === window ? 'WINDOW' : this.tagName );
        alert( event );
    }
}


var link1 = document.getElementById("link1");
var link2 = document.getElementById("link2");
var link3 = document.getElementById("link3");

// `this` within your handler will be `window` and not the link
link1.setAttribute( 'onMouseOver', 'doSomething( event )' ); 

// to attach event listeners you have to do a bit more work
// ( best to make a function rather than doing this each time
if( document.addEventListener ) {
    // compliant browsers
    link2.addEventListener('mouseover', doSomething, false);
} else {
    // internet explorer
    link2.attachEvent( 'onmouseover', function() {
        // grab the event object from the window
        var e = window.event;
        // normalise it a bit i.e. make it a bit more like a compliant browsers event object
        e.target = e.srcElement;
        e.preventDefault = function(){ e.returnValue = false };
        e.stopPropagation = function(){ e.cancelBubble = true };
        // and forward to your handler making sure that `this` is properly set
        doSomething.call( this, e );
    });
}

link3.onclick = doSomething;

注意避免將處理程序包裝在不必要的匿名函數中，這很浪費，並且在處理程序中丟失了this
所以代替

link3.onclick = function( event ) { doSomething( event ) };

只需直接分配處理程序

link3.onclick = doSomething;