onclick属性に書いた関数の引数（arguments[0]でeventオブジェクトを捕まえる）

Tweet

Category JavaScript 2010/03/14

（IEには関係ないような記事です。）

element.onclick=関数 をやると、第1引数にeventオブジェクトが渡されます。

<script type="text/javascript">
function testFn(e)
{
    // これで IE でも Firefox でも event オブジェクトを取得できる
    var e = e || window.event
    //ちょっと確認
    alert(e)
}
window.onload = function () {document.getElementById("sample20100314").onmouseover=testFn}
</script>
<img id="sample20100314" src="https://placehold.jp/150x150.png" alt="" />

・動作サンプル（マウスを画像の上に乗せるとalert）

onclickに書くと、書いたとおりで第1引数はundefined。

<script type="text/javascript">
function testFn(e)
{
    alert(e)
}
</script>
<img onmouseover="testFn()" src="https://placehold.jp/150x150.png" alt="" />

・動作サンプル（マウスを画像の上に乗せるとalert）

そんなときは、element.onclick = function(e) {testFn()} のようなイメージでよいのでしょうか。argumentsを使うとこんなことができるみたいです。

<script type="text/javascript">
function testFn(e)
{
    // これで IE でも Firefox でも event オブジェクトを取得できる
    var e = e || window.event
    //ちょっと確認
    alert(e)
}
</script>
<img onmouseover="testFn(arguments[0])" src="https://placehold.jp/150x150.png" alt="" />

・動作サンプル

第1引数でなく、こんな風に使ったり。

<script type="text/javascript">
function testFn(a, e)
{
    // これで IE でも Firefox でも event オブジェクトを取得できる
    var e = e || window.event
    //ちょっと確認
    alert(a)
    alert(e)
}
</script>
<img onmouseover="testFn(this, arguments[0])" src="https://placehold.jp/150x150.png" alt="" />

・動作サンプル

だから何ということもないですが、ふーんと思ったしだいです。