JS事件|事件代理(二)

鼠标事件

click单击击事件

artEl.addEventListener("click", function (e) {
    console.log("click");
})

dblclick双击事件

artEl.addEventListener("dblclick", function (e) {
    console.log("dblclick");
})

mouseenter鼠标移入事件事件 不计算子元素

artEl.addEventListener("mouseenter",function(e){
    console.log("mouseenter");
 })

mouseleave鼠标移出事件事件 不计算子元素

artEl.addEventListener("mouseleave",function(e){
    console.log("mouseleave");
})

mouseover鼠标移入事件事件 计算子元素

artEl.addEventListener("mouseover", function (e) {
    console.log("mouseover");
})

mouseout鼠标移出事件事件 计算子元素

artEl.addEventListener("mouseout", function (e) {
    console.log("mouseout");
})

鼠标移入事件mouseenter mouseleave与mouseover mouseout的区别
mouseenter、mouseleave不会考虑子元素，鼠标移入子元素，不会触发父元素的事件
mouseover、mouseout会考虑子元素

鼠标按下和抬起的事件

mousedown鼠标按下事件

artEl.addEventListener("mousedown", function (e) {
    console.log("mousedown");
})

mousedown鼠标抬起的事件

artEl.addEventListener("mouseup", function (e) {
    console.log("mouseup");
})

mousemove鼠标移动

artEl.addEventListener("mousemove", function (e) {
    console.log("mousemove");
})

事件的方法
event.preventDefault() 阻止默认事件 a的跳转、button的提交…
event.stopPropagation() 阻止事件冒泡（false），为后代节点相同的事件的时候，会触发父元素，这个可以阻止父元素的事件，点谁谁就触发。
event.stopImmediatePropagation() 阻止事件捕获（true），为后代节点相同的事件的时候，会触发父元素，这个可以阻止父元素的事件，点谁谁就触发。

页面事件

页面加载

window.addEventListener("load",function(){
     console.log("xxx");
})

页面滚动条

window.addEventListener("scroll",function(){
    console.log(window.pageYOffset);
})

点击事件的标签名 localName