Edit in JSFiddle

$(function () {
    $("#div1").click(function () {
        $("#div2").append("click<br/>");
    });

    $("#div1").dblclick(function () {
        $("#div2").append("dblclick<br />");
    });

    $("#div1").hover(function (event) {
        $("#div2").append("hover<br/>");
    });

    $("#div1").mousedown(function () {
        $("#div2").append("mousedown<br/>");
    });

    $("#div1").mouseenter(function () {
        $("#div2").append("mouseenter<br/>");
    });

    $("#div1").mouseleave(function () {
        $("#div2").append("mouseleave<br/>");
    });

    $("#div1").mousemove(function (event) {
        $("#div2").append("mousemove x:" + event.pageX + ", y:" + event.pageY + "<br/>");
    });

    $("#div1").mouseout(function () {
        $("#div2").append("mouseout<br/>");
    });

    $("#div1").mouseover(function () {
        $("#div2").append("mouseover<br/>");
    });

    $("#div1").mouseup(function () {
        $("#div2").append("mouseup<br/>");
    });
});

<div id="div1" style="width:300px;height:100px;background-color:blue;"></div>
<div id="div2"></div>