how to add an event listener to a CSS Pseudo-element

event-listener-CSS-Pseudo-element-getComputedStyle.md

how to add an event listener to a CSS Pseudo-element ???

stackoverflow

https://stackoverflow.com/q/9395858/8202629

https://stackoverflow.com/questions/5598675/javascript-find-pseudo-elements

getComputedStyle

$('*').filter(function(){return getComputedStyle(this, ':before').length != 0});

getComputedStyle & getDefaultComputedStyle

let style = window.getComputedStyle(element, [pseudoElt]);

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getDefaultComputedStyle

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getDefaultComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value

computed_value

let elem1 = document.getElementById("elemId");
let style = window.getComputedStyle(elem1, null);

// 它等价于
// let style = document.defaultView.getComputedStyle(elem1, null);

<style>
    #elem-container{
        position: absolute;
        left:     100px;
        top:      200px;
        height:   100px;
    }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
    function getTheStyle(){
        let elem = document.getElementById("elem-container");
        let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
        document.getElementById("output").innerHTML = theCSSprop;
    }
    getTheStyle();
</script>

event delegation

https://javascript.info/event-delegation

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

jquery

https://learn.jquery.com/events/event-delegation/

"htmlWebpackPlugin": {
    "files": {
        "css": [ "main.css" ],
        "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
        "chunks": {
            "head": {
                "entry": "assets/head_bundle.js",
                "css": [ "main.css" ]
            },
            "main": {
                "entry": "assets/main_bundle.js",
                "css": []
            }
        }
    }
}

https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md

React State

https://gist.github.com/xgqfrms-GitHub/a9869ffb1202562991cfbf77d67a95ef#gistcomment-2139610

getComputedStyle() & getPropertyValue()

getComputedStyle(document.querySelector('span.search-box'), '::after').getPropertyValue('content');