[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門
MacからLaradock PostgreSQLで接続エラー
Mac で Laradock の構築
Dockerで不要なイメージを削除
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
Composer インストール
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019
ロケールの再構築
vagrant グループに Apacheを追加
Linux2 Apache2 + PHP7.3 + PostgreSQL10
Anadondaの削除
[Mac]初期設定メモ(CentOS)
[Mac]PostgreSQL起動
FormRequest を利用したバリデーション
try-catch で Exception検知
[Debian]Node.js安定板インストール
Middlewareを利用したルートグループ化
namespaceを利用したルートグループ化
名前付きルートによるリダイレクト
artisanコマンド
IE11以下でclosest() を利用する
Karma と Mochaインストール
コンポーネントを親に登録
[脱jQuery]LoadingOverlay をネイティブで実装
Targetを利用せずに新規ウィンドウを開く(rel,class)
[脱jQuery]ネイティブでDrag&Dropやtableソート
[脱jQuery]$(document).on() をネイティブでコーディング
[Git].gitignore が反映されない
[Git]不要ファイル履歴削除
[GAS]Gmail指定ラベルの不要メール削除
UFJ API(開発用)を利用してみる
RuntimeException No application encryption key has been specified
2019/06/03
icon [脱jQuery]$(document).on() をネイティブでコーディング
jQuery の $(document).on() をネイティブでコーディング document.addEventListner() で記述するが、ネイティブの場合はターゲット(Event.target)が何かによって条件分岐が必要

サンプル

Github

yoo16/html_samples/blob/master/document_on.html

idの場合


    //jQuery
    $(document).on('click', '#id_name', function() {
        //working
    });

    //native
    document.addEventListener('click', function(event) {
        if (event.target.id === 'id_name') {
            //working
        }
    });

classの場合


    //jQuery
    $(document).on('click', '.class_name', function() {
        //working
    });

    //native
    document.addEventListener('click', function(event) {
        if(event.target.classList.contains('class_name'))
            //working
        }
    });
querySelectorAll() で取得する方法もある。 (この方がjQueryに近いか?) ただ、addEventListener() を事前登録するため、後にHTMLを発生さした要素では動作しないのでイベント管理が必要

querySelectorAll() classの場合


        document.querySelectorAll('.class_name').forEach(function(element) {
            element.addEventListener('click', function(event) {
                //working
            });
        });
上記はIEの場合「NodeList」をループで回せない可能性があるので、

        let elements = document.querySelectorAll('.class_name');
            [].forEach.call(elements, function(element) {
            element.addEventListener('click', function(event) {
                //working
            });
        });
としても良い。