Why does picker.on("change", ...) fire on page load?

Anyone know why picker.on("change", function(color) {...}); fires on page load?

Ideally I would like to only have it fire if the color picker is interacted with but for some reason it fires even if I never use the color picker.

Basic example:

<script>

    var source = document.querySelector('input'),
        picker = new CP(source);

    // prevent showing native color picker panel
    source.onclick = function(e) {
        e.preventDefault();
    };

    picker.on("change", function(color) {
        alert('fire');
        this.source.value = '#' + color;
    });

</script>

[jjrabbit]

Simple is definitely better, it was just an idea.

If it complicates things no sense implementing it.

Thanks!

[jjrabbit]

Oops I completely missed the documentation on the hooks. I’ll be sure to read more thoroughly before posting an issue next time!

The drag event is closer to what I was looking for but actually start + drag (for example picker.on("start drag", function(color) {...})) is the type of listening I was trying to achieve. Would be cool if you could combine them in a single statement like that but that’s not a big deal.

Your alternative is genius and works great. I’ll just do it that way.

Thanks tovic!