Мanipulating virtual elements javascript

Question

I have the funtction that adds an image in canvas after loading

    function handleImage(e) {
            var reader = new FileReader();
            var _this = this;
            var loadImage = _this.parentElement;
            var canvas = loadImage.querySelector('canvas');
            var ctx = canvas.getContext("2d");
            reader.onload = function(event) {
                var img = new Image();
                img.onload = function() {
                    let width_pic = 200;
                    let k = img.width/width_pic;
                    canvas.height = img.height / k;
                    ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width_pic, 
 canvas.height); 
                };
                img.src = event.target.result
            };
            reader.readAsDataURL(e.target.files[0]);
        }

However I will use this function for virtual element (element that appeared by

$('button').click(function(){
    $('#new-pic').html(`<p>virt</p><input class="load_ph_step" type="file"/> <canvas></canvas>`);
});

), for this element the function does not work.

I now in this sutuation in jquery is used $(document).on('click', 'selector', function(e){});, but now I use javascript-function.

https://jsfiddle.net/Nata_Hamster/8v1owgmL/

You can use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) with vanilla JS as well. One way is to listen the event on the closest ancestor element of the delegatees, then check `tagName` or some other identifier fitting to the delegatee from the `event.target` object, and return early, if the wanted element was not clicked. — Teemu, Jul 11 '21 at 12:21
Try `$(document).on('change', '.load_ph_step', handleImage)` — charlietfl, Jul 11 '21 at 12:33

pszaba · Answer 1 · 2021-07-11T12:56:21.137

You can implement in vanilla JS something similar

DOM = {};
DOM.addEventListener = function(onObject, type, subselector, listener, options = {}) {
    onObject.addEventListener(type, function(e) {
        if (subselector) {
            for (let target = e.target; target && target !== this; target = target.parentNode) {
                if (target.matches(subselector)) {
                    listener.call(target, e);
                    break;
                }
            }
        } else {
            listener.call(e.target, e);
        }
    }, options);
};


DOM.addEventListener(document, 'change', '.load_ph_step', handleImage);

Your code didn't work because you add an event listener to the only one element which exists at the moment of the running of your JS script.

You need to find the new elements as well whenever you choose an image.

This code places an event listener on the document (you may refine this) and calls the listener function when the sub-selector matches. (but it seems you already know this from jQ)

Edit: Ok, it seems I misunderstand the question? You probably want to try what @charlietfl commented above:

$(document).on('change', '.load_ph_step', handleImage)

Мanipulating virtual elements javascript

1 Answers1