55871


ブラウザで表示しているWebサイト上でselect要素のonchangeイベントを発火させたいです。  
具体的にはChromeのデベロッパーツール上で発火したいと考えています。

onchange()で発火できるかと思いましたがnullとなっておりました。  
細かな情報でも構いませんので何かありましたら教えてください。

### 具体的にやりたいこと

webページに表示されているselectの値をマウス操作時と同様に変更したいです。

下記に記載しましたが、値の変更はできましたがonchangeイベントを確認するとnullとなっておりました。

### 試したこと

[code]

    document.getElementById("hoge").value = "huga"; # 変更される
    document.getElementById("hoge").onchange(); # VM2161:1 Uncaught TypeError: document.getElementById(...).onchange is not a function
    
[/code]

[code]

    document.getElementById("hoge").onchange; # null
    document.getElementById("hoge").onchange = ()=>console.log("hoge"); # ↓のようにデベロッパーツールで見るとchangeに2つ目（表示上は1番上）として追加されていることが確認できました。
    
[/code]

### Chromeのデベロッパーツール上の表示

Elements -> 要素選択 -> Event Listeners  
を見るとchangeのみなんらかの関数が設定されています。（dojo.js?v1.11.2との事です）


CC BY-SA 4.0
2019-06-17T02:01:18.870
55862
2019-06-17T04:23:18.390
13022
question
javascript
ブラウザで表示しているWebページのselect要素のonchangeイベントを発火させる方法


## `onchange()` を呼ぶのはなぜうまくいかないか

`onchange` プロパティに入っているのは、その要素の `onchange` プロパティに代入された関数か `onchange`
属性に書かれたコードだけです。その要素に `addEventListener()` で登録された関数や、先祖要素で capturing/bubbling
phase で待っているリスナは `onchange` プロパティから参照できません。

## 対処: `change` イベントを自分で発火する。

[code]

    document.getElementById("hoge").value = "huga";
    document.getElementById("hoge").dispatchEvent(new Event('change', {bubbles: true, composed: true}));
    
[/code]

目的のイベントリスナが [`isTrusted`](https://dom.spec.whatwg.org/#dom-event-istrusted)
フラグをチェックしていなければ、これで上手くいくのではないかと思います。

`isTrusted`フラグをチェックしていたら簡単な方法はありません。コードを精査して、`isTrusted`チェック以降に書かれているコードを呼ぶしかないでしょう。


CC BY-SA 4.0
2019-06-17T04:23:18.390
55871
2019-06-17T04:23:18.390
3475
55862
answer