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/

JavaScript 蜘蛛

https://gist.github.com/xgqfrms-GitHub/3db8891c7ef6f79ea1996f2a4d29f499

const links = document.querySelectorAll(`ul.image-list a`);

let svg_name_arr = [];
let svg_url_obj = {};

for (let i = 0; i < links.length; i++) {
    if (links[i].getAttribute('class')) {
        let x = links[i].getAttribute('class');
        let y = links[i].setAttribute('download', `${i}-${x}`.svg)
        svg_name_arr.push(x);
        let img = getComputedStyle(links[i], '::before').getPropertyValue('background-image');
        let newImage = img.replace(/(url\(")|("\))/g,'');
        svg_url_obj[i] = newImage;
    }
}

console.log(`svg_name_arr = \n`, svg_name_arr);

console.log(`svg_url_obj = \n`, svg_url_obj);

virtual dom & DocumentFragment & insertAdjacentHTML

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

DocumentFragment 接口表示表示一个没有父级文件的最小文档对象。

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment

let docFragment = document.createDocumentFragment();

// assuming it exists (ul element)

let ul = document.getElementsByTagName("ul")[0],
    docfrag = document.createDocumentFragment();

const browserList = [
    "Internet Explorer", 
    "Mozilla Firefox", 
    "Safari", 
    "Chrome", 
    "Opera"
];

browserList.forEach((e) => {
    let li = document.createElement("li");
    li.textContent = e;
    docfrag.appendChild(li);
});

ul.appendChild(docfrag);

https://stackoverflow.com/questions/16126960/what-is-the-difference-between-appendchild-insertadjacenthtml-and-innerhtml

insertAdjacentHTML & insertAdjacentElement & insertAdjacentText

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

element.insertAdjacentHTML(position, text);


<!-- beforebegin -->
    <p>
        <!-- afterbegin -->
        foo
        <!-- beforeend -->
    </p>
<!-- afterend -->

https://gist.github.com/xgqfrms-gildata/f2b41a63feb21081e9f51d464d7434d7#gistcomment-2134601

EJS

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <section></section>
    </body>
</html>

plugins: [
    new HtmlWebpackPlugin({
        title: 'Custom template',
        template: 'my-index.ejs', // Load a custom template (ejs by default see the FAQ for details)
    })
]


module: {
    loaders: [
        { test: /\.hbs$/, loader: "handlebars" }
    ]
},
plugins: [
    new HtmlWebpackPlugin({
        title: 'Custom template using Handlebars',
        template: 'my-index.hbs'
    })
]

https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates

"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');