使用函数式编程处理事件参数的最佳方法是什么？

Question

我有以下代码：

<input type="text" class="input">
<button class="btn">Click me</button>
<ul class="cont"></ul>

<script>
    function createHtml(str) {
        return `<li>${str}</li>`;
    }

    function insertHtml(document, contClassName, str) {
        document.querySelector(`.${contClassName}`).innerHTML += str;
    }

    function createHandler(createHtml, inputClassName, insertHtml, document, contClassName) {
        return function () {
            insertHtml(document, contClassName, createHtml(document.querySelector(`.${inputClassName}`).value));
        }
    }

    const handler = createHandler(createHtml, 'input', insertHtml, document, 'cont');

    document.querySelector('.btn').addEventListener('click', handler);
</script>

我想尝试在功能上更多地写这个并提出：

Set.prototype.isEqual = function(otherSet) {
    if(this.size !== otherSet.size) return false;
    for(let item of this) if(!otherSet.has(item)) return false;
    return true;
}

我的主要不确定点是点击事件处理。在与函数式编程原理保持一致的同时，这是一种很好的方法吗？

提前感谢任何指导。