Function addHandler

vue.js:9709–9797

(
        el, //虚拟dom
        name, //name 事件名称 事件类型
        value, //事件函数
        modifiers, //事件类型状态状态
        important, // 根据important为true 把事件添加在前面 假就添加在尾部
        warn //警告日志
    )

    //为虚拟dom添加events 事件对象属性，如果添加@click='clickEvent' 则此时 虚拟dom为el.events.click.value="clickEvent"
    //或者虚拟dom添加nativeEvents 事件对象属性，如果添加@click.native='clickEvent' 则此时 虚拟dom为el.nativeEvents.click.value="clickEvent"
    function addHandler(
        el, //虚拟dom
        name, //name 事件名称 事件类型
        value, //事件函数
        modifiers, //事件类型状态状态
        important, // 根据important为true 把事件添加在前面 假就添加在尾部
        warn //警告日志
    ) {

        modifiers = modifiers || emptyObject;
        // warn prevent and passive modifier
        /* istanbul ignore if */
        if (
            "development" !== 'production' && warn &&
            modifiers.prevent && modifiers.passive
        ) {
            warn(
                'passive and prevent can\'t be used together. ' +
                'Passive handler can\'t prevent default event.'
            );
        }

        // check capture modifier 检查捕获修饰符
        if (modifiers.capture) {
            delete modifiers.capture;
            name = '!' + name; // mark the event as captured 将事件标记为捕获
        }
        if (modifiers.once) { //将事件标记为一次
            delete modifiers.once;
            name = '~' + name; // mark the event as once 将事件标记为一次
        }
        /* istanbul ignore if */
        if (modifiers.passive) {
            delete modifiers.passive;
            name = '&' + name; // mark the event as passive 将事件标记为被动的
        }

        // normalize click.right and click.middle since they don't actually fire
        // this is technically browser-specific, but at least for now browsers are
        // the only target envs that have right/middle clicks.
        //点击正常化。并点击。中间，因为它们实际上不会开火
        //这在技术上是特定于浏览器的，但至少现在浏览器是
        //唯一有右/中点击的目标环境。
        if (name === 'click') {//判断是否是点击事件
            if (modifiers.right) { //判断是否是鼠标右击
                name = 'contextmenu';
                delete modifiers.right;
            } else if (modifiers.middle) {//如果是鼠标左击
                name = 'mouseup';  //变成鼠标抬起事件
            }
        }

        var events;
        if (modifiers.native) { // 判断是有原生事件修饰符 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触  发的。
            /*
            * 比如<my-component @click="outClick"></my-component> 这样是不会触发事件的
            * 需要加修饰符<my-component @click.native="outClick"></my-component> 这样是不会触发事件的
            * */