常連

`input` イベントは右クリックメニューからの貼り付けにも対応した優秀なイベントですが、`<input type="text">` で検証してみると `value` プロパティには入力後の値が入っています。
`input` イベントハンドラ関数内において入力する一つ手前の値を取得する方法は用意されていないでしょうか。

下記コードで `data-*` 独自属性に入力前の値を保存しておく事で期待通りの結果を得られますが、同様の機能を標準APIを使う事でよりスマートに実装出来ないか、を探しています。

- [input イベントで入力前の値を取得する - JSFiddle](https://jsfiddle.net/o2cce8n5/)

```HTML
<input id="sample" type="text" name="sample" data-input-before="" value="" />

<script>
'use strict';
document.getElementById('sample').addEventListener('input', function handleInput (event) {
  var input = event.target,
      value = input.value;

  console.log('input-before', input.getAttribute('data-input-before'));
  console.log('input-end', value);
  input.setAttribute('data-input-before', value);

  console.log(event);
  console.log('data' in event, event.data); // false undefined
}, false);
</script>
```

「UI Events」によれば `InputEvent#data` が存在すると読めるのですが、Google Chrome ver.54.0.2840.87 m, Firefox ver.49.0.2 共に当該プロパティは存在しませんでした。

- [4.5.1. インタフェース InputEvent - UI Events （日本語訳）](https://triple-underscore.github.io/uievents-ja.html#interface-inputevent)
- [InputEvent - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/InputEvent)

input イベントで入力前の値を取得するAPIはありますか

### 実現したいこと

こんにちは。JavaScriptの勉強を独学でしている者です。
イベントハンドラの引数 e を使って、htmlのpタグ内のテキストを書き換えられるようにしたいです。

### 前提

pタグにカーソルを乗せると、pタグに挟まれたテキストが書き換えられるようにするため、
pタグにonmouseover属性を追加し、イベントハンドラを登録しました。
ところが、MicrosoftEdgeで画面表示してみると、下記のエラーが表示されてしまい、イベントハンドラを実行してくれません。

### 発生している問題・エラーメッセージ

```
Uncaught TypeError: Cannot read properties of undefined (reading 'target')
```

### 該当のソースコード
```JavaScript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        p {
            background-color: aquamarine;
        }
    </style>
    <body>
        <h3>今日の朝ご飯</h3>
            <p onmouseover="morning()">白ご飯，目玉焼き</p>
    </body>
    <script> 
        const morning = function(e) {
            e.target.textContent = "食パン，ヨーグルト";
            console.log(e);
        };
    </script>
</html>
```



### 試したこと
0. 16行目をコメントアウトして、17行目でEventオブジェクト e をコンソール表示させると、"undefined"と表示されてしまいました。
0. onmouseover属性をonclick属性に変えても、同様のエラーメッセージが出てしまいます。
0. JavaScriptのコードの実行タイミングが問題かと思い、scriptタグをbodyタグの前に置いてみましたが、Eventオブジェクトをコンソール表示結果はundefinedでした。


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


【JavaScript】イベントハンドラを設定した時、引数のEventオブジェクトが "undefined" となってしまう原因がわからない

### 前提
React-Routerでページ遷移を実装している

### 実現したいこと
戻るボタンで前のページに戻った時に検知してイベント発火→ページを再読み込みしたい

### 発生している問題・エラーメッセージ
addEventListenerを使った方法は見つけたがレンダリングが多くなってしまう
せっかくReactを使用しているのでReact-Routerを使用した方法はないのか

### 該当のソースコード

```
  window.addEventListener('popstate',e=>{
 　　console.log('レンダリング')
       window.location.reload();
    })
});
```

### 試したこと
addEventListenerを使用した方法しか記事がなかった




React ブラウザの戻るボタンを検知したい

### 前提
ボタンをクリックした時にonClickで関数を呼び出しreact-router-domを使ってページ遷移させたいです。

### 発生している問題・エラーメッセージ
クリックしてもなにも起こりません。
コンソールにもエラーはありません。

### 該当のソースコード

App5.jsx
```
import { Link } from "react-router-dom";

function App5() {

// ここの関数でページ遷移を実行したい
const aaa=()=>{
<Link to={`/register/`}>こちら</Link>
}

    return(
        <>
        <h1>ホーム</h1>
<button onClick={aaa}>クリック</button>
        </>    
    )
}
```
register.jsx
```
import { Link } from "react-router-dom";

const Register = () => {
  return (
    <>
      <h1>新規登録ページ</h1>
      <div>
        <Link to={`/`}>ホームに戻る</Link>
      </div>
    </>
  );
};

export default Register;
```
main.jsx
```
import React from 'react'
import ReactDOM from 'react-dom'

import App5 from './router/App5'
import Register from './router/register'
import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(

    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<App5 />} />
      <Route path={`/register/`} element={<Register />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
)
```

### 試したこと

関数の中で戻るボタンの実装方法はありましたが特定のページへ遷移させる方法が見つかりませんでした。

### 補足情報（FW/ツールのバージョンなど）

react ver.18


Reactでボタンをクリックしたときにページ遷移させたい

いつもお世話になっております。
今回はC#のDataGridViewについて質問させていただきます。

0. コンボボックスのイベントを設定したい
要は以下の通りに動くプログラムを組みたいと思っています。
![イメージ説明](700ea9a97d761b6d3e88787535dfa626.png)
↓
![イメージ説明](9c672cc7ac0e0886e2e6b23625a9ff05.png)

0. ソースコード
```C#
        private void dataGridView2_CellEndEdit(object sender, DataGridViewCellEventArgs e)
        {
            switch (e.RowIndex)
            {
                case 0:
                    DataRow[] b;
                    b = データベース.Select("CategolyName = '" + a + "'");
                    CategolyInfo.DataSource = データベース.Select("CategolyType = " + b[0][0] + " And CategolyIdx <> 0");
                    CategolyInfo.DisplayMember = "CategolyName";
                    CategolyInfo.ValueMember = "CategolyIdx";
                    break;
            }
        }

        private void dataGridView2_CellValidating(object sender, DataGridViewCellValidatingEventArgs e)
        {
            switch (e.RowIndex)
            {
                case 0:
                    a = e.FormattedValue.ToString();
                    break;
            }
        }
```
3．なぜこれではダメなのか
このイベントを使った方法だと、他のセルを選択しないとイベントが発生しません。
理想としては、「属性カテゴリーのチェックボックスを確定した瞬間に属性詳細が更新される」ようにしたいと思っています。

もしよろしければ解決案、代替案、諦めたほうが良い理由などをお伺いしたいです。

DataGridView上のコンボボックスのイベントを設定したい

説明のしやすさのため、できれば以下のcodepenを見てください。

https://codepen.io/taketakeyyy/pen/NWGNMmL


# コード
```html
<select id="id-sel_lang">
  <option value="c" selected>C</option>
  <option value="cpp">C++</option>
  <option value="js">JavaScript</option>
</select>

<br>
<input type="button" value="click" id="id-btn">
```

```javascript
const sel_lang = document.getElementById("id-sel_lang");
sel_lang.addEventListener("change", function(){
  console.log("変わりました");
});

const btn = document.getElementById("id-btn");
btn.addEventListener("click", function(){
  sel_lang.value = "js"; 
});
```

# やりたいこと
1つのセレクトボックスと、1つのボタンがあります。

セレクトボックスにはonchangeイベントを追加しています。これにより、セレクトボックスをマウスを使って変更すると、consoleに「変更しました」と表示されます。

ボタンをクリックすると、セレクトボックスの値は"JavaScript"に変わります。しかし、onchangeイベントは発火せず、consoleには何も表示されません。

私がやりたいことは、ボタンをクリックしたときに、onchangeイベントを発火させたいです。

ただし、「onchangeに登録している関数に名前をつけて外に出し、ボタンのclickイベントでその関数を呼び出す」ようなことはしたくありません。できればJavaScriptの処理でonchangeを発火させるようなことをしたいです。


もっと言えば、私は、
```javascript
btn.addEventListener("click", function(){
  /*私はここの部分を書き換えられる権限しかない*/
});
```

という状況です。

なにか良い方法がありますでしょうか？よろしくお願いします。

# 【解決後】最終的なコード
yambejp様の回答どおりに、`HTMLElement.prototype`に、`dispatchEvent`を実行する`trigger`を新しく定義する方法で解決しました。

```javascript
const sel_lang = document.getElementById("id-sel_lang");
sel_lang.addEventListener("change", function(){
  console.log("変わりました");
});

/***追加・編集ここから***/

HTMLElement.prototype.trigger = function(eStr) {
  var e = document.createEvent("HTMLEvents");
  e.initEvent(eStr, true, true );
  this.dispatchEvent(e);
}

const btn = document.getElementById("id-btn");
btn.addEventListener("click", function(){
  if (sel_lang.value === "js") { return; }
  sel_lang.value = "js"; 
  sel_lang.trigger("change");
});

/**追加・編集ここまで**/
```

あるいは`HTMLElement`を汚したくない場合、`sel_lang`に追加する方法でも解決できました。

```javascript
const sel_lang = document.getElementById("id-sel_lang");
sel_lang.addEventListener("change", function(){
  console.log("変わりました");
});

/***追加・編集ここから***/

sel_lang.trigger = function(eStr) {
  var e = document.createEvent("HTMLEvents");
  e.initEvent(eStr, true, true );
  this.dispatchEvent(e);
}

const btn = document.getElementById("id-btn");
btn.addEventListener("click", function(){
  if (sel_lang.value === "js") { return; }
  sel_lang.value = "js"; 
  sel_lang.trigger("change");
});

/***追加・編集ここまで***/
```

JavaScriptでElement.valueをセットしたときに、onChangeイベントを発火させる方法

## event.target.valueへアクセスしたい
HTMLの<select>を使う以下のコードで成立しています。
しかし、コンポーネントへ`event.target.value`を渡す時はこれでは成立しません。
```

renderSelect(State:number){
if(State===1){
  return(
           <select
            onChange={(e) =>
              this.setState({ set_num: parseInt(e.target.value) })
            }
            defaultValue=""
          >
            {this.state.prefecture_arry?.map((d) => (
              <option value={d.value}>{d.label}</option>
            )) || ""}
          </select>
        )
}



```
オプションに入力しているものは以下のような形です。
```
[{value: 0 , label : "札幌"},
{value : 1, label :"江別"}
];
```
## 失敗している例

```
import Select from "@material-ui/core/Select";

 renderInputPoint(State:number){
    if(State >= 1){

      return (
        <tr>
          <td>観測点</td>
          <td>
          <Select
            onChange={(e) =>
              this.setState({ set_num: parseInt(e.target.value) }) 
//型 'unknown' の引数を型 'string' のパラメーターに割り当てることはできません。ts(2345)
            }
            defaultValue=""
          >
            {this.state.prefecture_arry?.map((d) => (
              <option value={d.value}>{d.label}</option>
            )) || ""}
          </Select>

              </td>
          </tr>
      )
      }else{
        return <tr></tr>

      }
      


  }

```
コードに入れたエラーコードの通り、
`型 'unknown' の引数を型 'string' のパラメーターに割り当てることはできません。ts(2345)`
というものが出てきてしまいます。

## 求める回答
とにかく、eventの情報をコンポーネントに渡して、表示部を変えたい。
onChangeでstateの情報を変更したいということです。

React Selectコンポーネント onChangeのイベントの値を渡したい

### 前提・実現したいこと

プログラミングスクールの課題を行っています。イベントハンドラについての課題です。
以下、課題文です。
「「背景黒」ボタンを押すと、ページ全体の背景色が黒で文字色が白、「背景白」ボタンを押すと、ページ全体の背景色が白で文字色が黒となるようプログラムを追記してください。」

**元のHTML**
（script部分に書き足すことで、上記の要件を満たすプログラムを作成します）
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>実行タイミング</title>
    <script>
        /* 課題処理を追加 */
    </script>
</head>
<body>
    <p>ボタンクリックにより背景色と文字色を変化</p>
    <button id="black">背景黒</button>
    <button id="white">背景白</button>
</body>
</html>
```


### 発生している問題・エラーメッセージ

```
ボタンを押しても、何も起こらない。
```

### 該当のソースコード

script部分のみで失礼します。
```Javascript

    <script>
　　　　/* 課題処理を追加 */
        function background_black() {
            document.style.color = '#000000';
            document.style.backgroundColor = '#FFFFFF';
        }
        function background_white() {
            document.style.color = '#FFFFFF';
            document.style.backgroundColor ='#000000';
        }
        window.onload = function() {
            var bgBlack = document.getElementById('black');
            var bgWhite = document.getElementById('white');
            bgBlack.addEventListener('click', background_black, false);
            bgWhite.addEventListener('click', background_white, false);
        }
    </script>
```

ご教示お願いいたします。