十八、mouse

/*
 * 当时有mouseover的时候，如果从父类移到子类依然也会得到
 * 一个父类的mouseout事件，很多时候这种处理是不需要的
 * 所以在JQuery中通过mouseenter和mouseleave来替换
 */
// $("#parent1").on("mouseover mouseout",function(event){
    // print(event.type+","+this.id);
// });

// $("#child1").on("mouseover mouseout",function(event){
    // print(event.type+","+this.id);
// });

//在JQuery中通常建议使用mouseenter和mouseleave来代替mouseover和mouseout
$("#parent2").on("mouseenter mouseleave",function(event){
    print(event.type+","+this.id);
});

$("#child2").on("mouseenter mouseleave",function(event){
    print(event.type+","+this.id);
});

//使用hover可以有效的实现mouseenter和mouseover的轮换
$("#parent1").hover(function(event){
    print(event.type+","+this.id);
},function(event){
    print(event.type+","+this.id);
});

$("#child1").hover(function(event){
    print(event.type+","+this.id);
},function(event){
    print(event.type+","+this.id);
});

function print(text) {
    $("#content").append(text+"<br/>");
}