SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

(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="" />

・動作サンプル

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

関連するメモ

コメント