/**
 * @author  wuwg
 * @createTime  20220225
 * @param event {Object}  event 事件
 * @param proxyContain {Object}  代理容器元素
 * @param callback {function}  找到目标元素后的回调函数
 */
// 处理代理事件
function operateProxyEvent(event, proxyContain, callback) {
    // 代理容器
    const _proxyContain = proxyContain;
    // 是否继续查找
    let _loopFlag = false;
    // 【当前节点】
    let _currentNode = event.target;
    // 【目标节点】
    let _targetNode = null;
    // 循环查找目标元素
    do {
        // 判断 【当前节点】是不是【目标节点】
        const _isTargetFlag = _currentNode &&
            // 这里判断的是class 为 item
            _currentNode.classList.contains('jsItem');
        if (_isTargetFlag) {
            // 打断循环
            _loopFlag = false;
            //  【目标节点】= 【当前节点】
            _targetNode = _currentNode;
        }
        // 是否继续循环, 找到目标，那么不再循环， 否则判断点击元素是否在代理容器里，在的话继续循环查找。
        _loopFlag = _isTargetFlag ? false : _proxyContain.contains(_currentNode);
        // 【当前节点】往上推一级，等于当前节点的【父节点】
        _currentNode = _loopFlag ? _currentNode.parentNode : _currentNode;
    } while (_loopFlag);
    // 如果是目标节点
    if (_targetNode) {
        typeof callback === 'function' && callback(_targetNode);
    } else {
        console.warn('非代理的目标节点： 不触发点击事件');
    }
}

// 代理容器
const _proxyContain = document.querySelector('#jsProxyContain');
// 给代理容器绑定事件
_proxyContain.addEventListener('click', (event) => {
    // 处理代理事件
    operateProxyEvent(event, _proxyContain, (target) => {
        const _dataItemNumber = target.dataset.number;
        alert('是代理的目标节点，当前节点的number值是：' + _dataItemNumber);
    });
});