web-dev-qa-db-ja.com

このオブジェクトを引数としてonChangeイベントに渡しますか？

「this」オブジェクトをパラメーターとして渡すeventHandlerを作成します。私はこれを試しました

 <select id="customer" onchange="custChange(this);">

それは正常に動作し、変更時にも呼び出されたdomオブジェクトを取得します。

しかし、私の理解によれば、これは、最初の引数が以下のようなイベントハンドラーメソッドで（「this」オブジェクトではなく）「イベント」として期待されるため、機能しないはずです

  <select id="customer" onchange="custChange(event);">

名前が正しいか、最初の引数が常にイベントオブジェクトと見なされるかどうかを指定して、eventHandlerメソッドで任意の引数（thisまたはevent）を渡すことができますか？

javascriptonchange
17
emilly

あなたはcustChangeを定義し、さらに重要なことに：あなたはそれを呼び出す。したがって、受け入れる引数と順序を自分で決めることができます。 呼び出されない関数だけが呼び出される場合は、引数の順序に注意する必要があります。

ただし、custChangeを定義して その他の方法バインディングイベントハンドラー と互換性があるようにしたい場合、つまり.

function custChange(event) {
    // `this` refers to the DOM element
}

それであなたはそれを呼び出すことができます

custChange.call(this, event);
9
Felix Kling

私はテストをしました。

function change(){
    console.info( arguments );
}

<select name="" id="" onchange="change( this, event )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( event, this )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( this, e )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

上記の選択を1つずつ操作し、以下のコンソール情報を取得しました。

  • [選択、イベント]
  • [イベント、選択]
  • キャッチされていないReferenceError：eが定義されていません

したがって、結果から、ページ呼び出しで正しいWordを渡す必要があり、その位置を変更できるという結論に達しました。

5
Zhang Yang

最初の引数は常にイベントです。

[編集]任意の引数でハンドラーを呼び出すことができ、eventおよびthisオブジェクトは呼び出されたときに使用できます。 eventはイベントオブジェクトを参照し、thisはイベントを発生させるdomオブジェクトを参照します。[/ edit]

ただし、ハンドラではevent.currentTargetは、イベントを発生させたオブジェクトにリンクします。

<script>
    function custChange(event) {
        // event.currentTarget = select element
    }
</script>
<select id="customer" onchange="custChange(event);">
2
Thierry J.

たぶんあなたはこのように行うことができます：

<p><a id="link" href="#">click me</a></p>
<script>
var link = document.getElementById("link");
AttachEvent(link, "click", EventHandler);
function AttachEvent(element, type, handler) {
    if (element.addEventListener) element.addEventListener(type, handler, false);
    else element.attachEvent("on"+type, handler);
}

お役に立てば幸いです。

0
ZaoTaoBao

あなたは控えめなjavaScriptに従ってそれを行うことができます：

$("#customer").on("change", function () {
    ... and here you have $(this) object linked to 'customer' select
});
0
Sergio