2016-04-30 6 views
2

彼らは両方のイベントとして考えられているのonclick違いのonclick

<!DOCTYPE html> 
<html> 
<body> 

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> 

</body> 
</html> 

document.getElementById("myBtn").addEventListener("click", displayDate);  

と中クリックの違いは何ですか?私たちはなぜonclickの代わりにclickを使用することができないのですか?

答えて

4

これらは同じイベントです。ハンドラをインラインに割り当てる場合はonclick、イベントリスナを使用して割り当てる場合はclickを使用します。

また、このようにすることもできません。これは実行する必要があるか、動作しないためです。

はMDNで詳しく読む:

3

差は、最初はevent listenerであることであり、第二は、event handler content attributeあります。

イベントハンドラのコンテンツ属性には、およびgetting the current value of the event handlerアルゴリズムを使用してイベントリスナーを生成するinternal raw uncompiled handlerが格納されます。

実際には、これは範囲に影響します。

(function() { var element = document.body; 
    var str = "console.log([typeof foo, typeof bar])"; 
    var func = function() { console.log([typeof foo, typeof bar]); }; 
    element.foo = 'foo'; 
    var bar = 'bar'; 
    element.setAttribute('onclick', str); 
    element.addEventListener('click', func); 
    element.click(); 
    // Event handler content attribute logs ["string", "undefined"] 
    // Event listener logs ["undefined", "string"] 
})(); 

私はイベントハンドラの使用をお勧めしません。彼らは古い思い出であり、イベントリスナーに取って代わられています。