jQuery事件对象和抛发

事件数据的传输

事件对象

var Utils={
    drag:function(elem){
        elem.self=this;
        elem.addEventListener("mousedown",this.mouseHandler);
    },
    mouseHandler:function(e){
        if(e.type==="mousedown"){
            document.addEventListener("mousemove",this.self.mouseHandler);
        }else if(e.type==="mousemove"){

        }else if(e.type==="mouseup"){

        }
    },
    loadImg:function(imgSrcList,callback){
        var img=new Image();
        img.src=img.imgSrcList[0];
        img.num=0;
        img.imgSrcList=imgSrcList;
        img.addEventListener("load",this.loadHandler);
    },
    loadHandler:function(e){
        console.log(this.num,this.imgSrcList);
    }
}

事件传参

div{
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
}
<div></div>

var Utils={
    drag:function(elem){
        // this就是Utils
        $(elem).on("mousedown",this,this.mouseHandler);
    },
    mouseHandler:function(e){
        if(e.type==="mousedown"){
            // e.data就是事件传参的this值
            console.log(e.data);
        }else if(e.type==="mousemove"){

        }else if(e.type==="mouseup"){
            
        }
    },
    loadImg:function(imgSrcList,callback){
        $("<img>").on("load",{num:0,imgSrcList:imgSrcList,callback:callback},this.loadHandler).attr("src",imgSrcList[0]);
    },
    loadHandler:function(e){
        // data就是传递过来的参数值
        console.log(e.data);
    }   
}

var div=document.querySelector("div");
Utils.drag(div);

Utils.loadImg(["./img/2.jpg"],function(){

})



$("div").on("click",{a:1},function(e){
    console.log(e.data);
})

$("div").click({a:1},function(e){
    console.log(e.data);
})


fna();
function fna(){
    var a=1;
    // 如果传一个参数直接写入就可以，如果需要传入多个参数可以使用对象或者数组
    $("div").on("click",a,clickHandler);
}
function clickHandler(e){
    console.log(e.data);
}

事件抛发

document.addEventListener("abc",abcHandler);
function abcHandler(e){
    console.log(e);
}
var evt=new Event("abc");
evt.a=10;
document.dispatchEvent(evt);

事件抛发过程中是可以传参的
如果传参时数组，事件接收函数中从第二位参数向后对应数组的每个元素。
如果传参使用的是对象或者其它数据，事件接收函数中只有第二位参数可以接收。
不支持事件抛发时多个数据直接传参，trigger函数只有两个参数，第一个是事件类型，第二个是要传的参数。

$(document).on("abc",function(e,obj,arr){
    console.log(e,obj,arr);
})
// trigger抛发事件，类似于dipatchEvent
$(document).trigger("abc",{a:1,b:[123]});
$(document).trigger("abc",[{a:1},[123]]);
// jQuery中没有dipatchEvent方法

事件传参有两种方式
1、事件触发前传参，侦听时传入的参数
2、事件触发时传参，抛发事件时传入的参数

abc();
function abc(){
    var a=1;
    // 这里a就是事件触发前传参
    $(document).on("abc",a,abcHandler);
    $(document).on("click",clickHandler);
}

function abcHandler(e,b,c){
    console.log(e.data);// 这个就是事件触发前传参的a
    console.log(b,c);// 这个b和c就是抛发事件时传参b和c
}

function clickHandler(){
    var b=3;
    var c=5;
    $(document).trigger("abc",[b,c]);
}

$(document).on("click",clickHandler);
$(document).trigger("click",1);
function clickHandler(e,a){
    console.log(a);
}

<form action="#">
    <input type="text">
    <button type="submit">提交</button>
</form>

$(document).on("contextmenu",function(){
    console.log("aaa");
})
$(document).trigger("contextmenu");
// 右键菜单不触发菜单，提交表单会触发
$("form").on("submit",function(){
    console.log("aaa");
})
// $("form").trigger("submit");//触发默认事件，提交表单
$("form").triggerHandler("submit");//不触发默认事件


// 事件触发的对象不同
$("div").on("abc",function(){
    $(this).text("1");
    return {a:1};
})
// $("div").trigger("abc");//会触发所有对象接收到事件
// $("div").triggerHandler("abc");//只会触发到第一个对象接收事件

事件函数返回值

/* document.addEventListener("click",clickHandler);
function clickHandler(e){
    // 原生js中不能在事件函数中使用return返回内容
    return {a:1};
} */


abc();
function abc(){
    $(document).on("click",clickHandler);
    def();
}
function clickHandler(e){
    return {a:1};
}
function def(){
    // 这个结果返回抛发事件的对象
    var value=$(document).trigger("click");
    // 这个结果返回一个undefined，原因是因为事件收到这个抛发内容后，执行事件函数后没有返回
    // 如果事件函数使用return返回值，这个triggerHandler执行后就能获取到返回的值了
    var value=$(document).triggerHandler("click");
    console.log(value);
}

事件冒泡

$(document).on("click",function(){
    console.log("aaa");
});
// 会冒泡
$("div").trigger("click");
// 不会冒泡
$("div").triggerHandler("click");

// 如果需要侦听事件只有一次，就销毁。这种事件的写法是one
$("div").one("click",function(){
    console.log("aaa");
})

​