常連

### 前提

VB.NETで内部にチェックボックス付リストボックスを保持したコンボボックスを作成しました

### 実現したいこと

**WindowsFormのカスタムコンボボックスに使用した内部コントロールの継承イベントを実装したい**

こちらのサイトを参考にチェックボックス付コンボボックスを作成しました。
https://hilapon.hatenadiary.org/entry/20100406/1270552723

文字数制限で自身のソースが記述出来ませんでしたので、参考リンクのソースを見て頂ければ幸いです。

そのクラスはCheckedComboBoxというクラスでComboBoxを継承して作成されています。
ドロップダウンを展開すると内部のコントロールであるCheckedListBoxが表示されリストの左側のチェックが可能、ドロップダウンを閉じるとコンボボックスのテキストにリストでチェックした内容が表示されるという機能です。

上記コンボボックスを業務別に幾つかのパターンで作成する必要があるためそれを継承してCustomCheckedComboBoxを作成しました。(コードの下方に記述)

**継承先のCustomCheckedComboBoxにおいて、継承元のコントロールの内部にあるCustomCheckedListBoxのOnDrawItemイベントをOverridesしたイベントを作成したいのですが、継承先にどのように実装すれば良いか分かりません。**
上記のような内部に配置されたコントロールのイベントを継承するにはどのような実装が必要でしょうか？

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

```
エラーメッセージ
```

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

```VB.NET

’ 参照元のソースCheckedComboBoxを継承したコントロール
Public Class CustomCheckedComboBox
   Inherits CheckedComboBox

#Region "コンストラクタ"
    ''' <summary>
    ''' コンストラクタ
    ''' </summary>
    ''' <remarks></remarks>
    Public Sub New()
        MyBase.New()
        InitializeComponent()
    End Sub
#End Region

#Region "InitializeComponent() : コンポーネント初期化"
    ''' <summary>
    ''' InitializeComponent
    ''' </summary>
    ''' <remarks></remarks>
    Private Sub InitializeComponent()
        Me.SuspendLayout()

        ' このクラスでの読字の初期化処理があれば記述

        Me.ResumeLayout(False)
        Me.PerformLayout()
    End Sub
#End Region

#Region "イベント"

'  継承元のコントロールの内部にあるCustomCheckedListBoxのOnDrawItemイベントをOverridesしたイベントをここに記述したい

#End Region

End Class

```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）
VisualStudio2017 .NET Framework4.6.2
WindowsForm

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



WindowsFormのカスタムコンボボックスに使用した内部コントロールの継承イベントを実装したい

### 前提

C# WPFで、ボタン等のクリック音を表現するため、以下のようにプログラムを作成しました。
ボタンクリック → MediaPlayerでmp3ファイルを再生 → MediaEndedイベントハンドラで処理を呼び出す。

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

クリック音のようなごく短いファイルを再生した時、まれにMediaEndedイベントが発生しないケースがあります。
エラーメッセージ等は出ません。MediaElementを使用しても同様でした。

サンプルコードでは、ボタンクリック時にボタンのIsEnabledプロパティをfalseに設定しており(連打防止のため)、MediaEndedが発生しないとフリーズしたように見えます。
また、MediaEndedイベントハンドラ登録後に100msほどスリープさせると発生率が下がったような気がしますが、実際はわかりません。

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

MediaEndedTest1.xaml
```XAML
<Page x:Class="Test.MediaEndedTest.MediaEndedTest1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Test.MediaEndedTest"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="MediaEndedTest1">

    <Grid>
        <Button x:Name="Button" Content="To Page2" 
                Height="50" Width="200"
                Click="Button_Click"/>
    </Grid>
</Page>
```

MediaEndedTest1.xaml.cs
```C#
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Navigation;

namespace Test.MediaEndedTest
{
    /// <summary>
    /// MediaEndedTest1.xaml の相互作用ロジック
    /// </summary>
    public partial class MediaEndedTest1 : Page
    {
        public MediaEndedTest1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var pushedButton = (Button)sender;
            pushedButton.IsEnabled = false;
            var pushSound = new MediaPlayer();
            pushSound.MediaEnded += (sender, e) =>
            {
                var mediaEndedTest2 = new MediaEndedTest2();
                NavigationService.Navigate(mediaEndedTest2);
            };
            pushSound.Open(new Uri(//クリック音のmp3ファイル//, UriKind.Relative));
            pushSound.Play();
        }
    }
}
```

MediaEndedTest2.xaml
```XAML
<Page x:Class="Test.MediaEndedTest.MediaEndedTest2"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Test.MediaEndedTest"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="MediaEndedTest2">

    <Grid>
        <Button x:Name="Button" Content="To Page1" 
                Height="50" Width="200"
                Click="Button_Click"/>
    </Grid>
</Page>
```

mediaEndedTest2.xaml.cs
```C#
using System;
using System.Collections.Generic;
using System.Text;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Test.MediaEndedTest
{
    /// <summary>
    /// MediaEndedTest2.xaml の相互作用ロジック
    /// </summary>
    public partial class MediaEndedTest2 : Page
    {
        public MediaEndedTest2()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var pushedButton = (Button)sender;
            pushedButton.IsEnabled = false;
            var pushSound = new MediaPlayer();
            pushSound.MediaEnded += (sender, e) =>
            {
                var mediaEndedTest1 = new MediaEndedTest1();
                NavigationService.Navigate(mediaEndedTest1);
            };
            pushSound.Open(new Uri( //クリック音のmp3ファイル//, UriKind.Relative));
            pushSound.Play();
        }
    }
}

```

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

 Visual Studio 2022
 C#10.0
 WPF



C# WPF MediaPlayer.MediaEndedイベントが発生しない場合がある

### 実現したいこと

C# イベントハンドラについての質問です。
イベントハンドラを登録する際、
FooInstance.FooEvent += FugaMethod();
のような書き方をすると思います。

上記は、イベントハンドラを追加している意味合いになると思いますが、
すでに登録されている場合、それを削除して新しく登録するような機能を求めています。

これは標準機能として存在しているのでしょうか？それとも、アクセサを明示的に実装するべきでしょうか？
もしそういった機能が標準で備わっているとしたら、自分では見つけられなかったのでドキュメントのリンクなどを貼っていただけると助かります。


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

Visual Studio 2022 C# 8.0


C# 8.0 イベントハンドラ登録時に、追加ではなく上書きしたい

### 前提・実現したいこと

プログラミングスクールの課題を行っています。イベントハンドラについての課題です。
以下、課題文です。
「「背景黒」ボタンを押すと、ページ全体の背景色が黒で文字色が白、「背景白」ボタンを押すと、ページ全体の背景色が白で文字色が黒となるようプログラムを追記してください。」

**元の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>
```

ご教示お願いいたします。

JavaScript ボタンを押して文字色・背景色を変えたい

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

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

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

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

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

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




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

説明のしやすさのため、できれば以下の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イベントを発火させる方法

いつもお世話になっております。
今回は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上のコンボボックスのイベントを設定したい

###前提・実現したいこと
現在JavaScriptのイベントバブリング、イベントキャプチャリングの勉強をしております。イベントの処理される順番を見たかったのですが、
なぜ Uncaught TypeError: sections_a.addEventListener is not a function のエラーが出るのかわかりません。ご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。

###発生している問題・エラーメッセージ
処理が該当の箇所（20行目）で滞ってしまっております。なぜ Uncaught TypeError: sections_a.addEventListener is not a function のエラーが出るのかわかりません。

エラーメッセージ
Uncaught TypeError: sections_a.addEventListener is not a function

###該当のソースコード
```
<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
  <section class="sections_a, sections_b">
   <section onclick="console.log('section1')">
    <div id="aaa" onclick="console.log('div2')">
      <p onclick="console.log('p');">test</p>
    </div>
   </section>
  </section>
    <script type="text/javascript">
      var div = document.getElementById('aaa');
      var sections_a = document.getElementsByClassName('sections_a');
      var sections_b = document.getElementsByClassName('sections_b');
        
      
      sections_a.addEventListener('click', function sec_2(){
          console.log('section_a');
      }, true);
        
      div.addEventListener('click',function(){
          console.log('div');
      },true);
        
      sections_b.addEventListener('click', function(){
          console.log('sections_b'); 
      }, true);

    </script>
  </body>
</html>
```