普遍鼠标事件

//click单击鼠标 输出
artEle.addEventListener("click", function() {
    console.log("click");
});

//dblclick双击鼠标 输出
artEle.addEventListener("dblclick", function() {
    console.log("dblclick");
});

// 鼠标移入事件
artEle.addEventListener("mouseenter", function() {
    console.log("mouseenter");
    this.style.backgroundColor = "deeppink";
});
//鼠标移出事件
artEle.addEventListener("mouseleave", function() {
    console.log("mouseleave");
    this.style.backgroundColor = "skyblue";
});


//鼠标移入事件
artEle.addEventListener("mouseover", function() {
    console.log("mouseover");
    this.style.backgroundColor = "deeppink";
});
//鼠标移出事件
artEle.addEventListener("mouseout", function() {
    console.log("mouseout");
    this.style.backgroundColor = "skyblue";
});

/**
 * mouseover、mouseout会考虑子元素（）
 * mouseenter、mouseleave不会考虑子元素
 * 
 * 不考虑子元素：鼠标移入子元素，不会触发父元素的事件
 */

//鼠标按下 输出
secEle.addEventListener("mousedown", function() {
    console.log("mousedown,section");
});
//鼠标抬起 输出
secEle.addEventListener("mouseup", function() {
    console.log("mouseup,section");
});

//鼠标移动
document.addEventListener("mousemove", function(e) {
    let event = e || window.event;
    console.log("mousemove,section");
    //event.clientX鼠标在浏览器水平位置
    //event.clientY鼠标在浏览器垂直位置
    console.log(event.clientX, event.clientY);
});

//【事件对象的方法】
// [阻止默认事件]event.preventDefault();
let aEle = document.getElementsByTagName("a")[0];
aEle.addEventListener("click", function(e) {
    let event = e || window.event;
    // window.alert("a被点击了！！！");
    let state = window.confirm("ccc");
    if (!state) {
        event.preventDefault();
    }

});

//【阻止事件冒泡】
// event.stopPropagation();
artEle.addEventListener("click", function() {
    console.log("artEle");
});

secEle.addEventListener("click", function() {
    let event = e || window.event;
    event.stopPropagation();
    console.log("section");
});

pEle.addEventListener("click", function(e) {
    let event = e || window.event;
    event.stopPropagation();
    console.log("p");
});

//【阻止事件捕获】
event.stopImmediatePropagation();
artEle.addEventListener("click", function(e) {
    let event = e || window.event;
    event.stopImmediatePropagation();
    console.log("artEle");
}, true);

secEle.addEventListener("click", function(e) {
    let event = e || window.event;
    event.stopImmediatePropagation();
    console.log("section");
}, true);

pEle.addEventListener("click", function(e) {
    let event = e || window.event;
    event.stopImmediatePropagation();
    console.log("p");
}, true);