鼠标事件、页面事件

let artEle = document.querySelector(“article”);
let secEle = document.querySelector(“section”);
let pEle = document.querySelector(“p”);

// [鼠标事件]

/* // click单击鼠标事件
artEle.addEventListener(“click”,function(){
console.log(“click”);
});

// dblclick双击鼠标事件
artEle.addEventListener(“dblclick”,function(){
console.log(“dblclick”);
}); */

/* // mouseenter鼠标移入事件
artEle.addEventListener(“mouseenter”,function(){
console.log(“mouseenter”);
this.style.backgroundColor = “pink”;
});

// mouseleave鼠标移出事件
artEle.addEventListener(“mouseleave”,function(){
console.log(“mouseleave”);
this.style.backgroundColor = “aqua”;
}); */

/*
mouseenter、mouseleave 不会考虑子元素
mouseover、mouseout 会考虑子元素

不考虑子元素：鼠标移入子元素，不会触发父元素的事件

*/

/*
// mouseover鼠标移入事件
artEle.addEventListener(“mouseover”,function(){
console.log(“mouseover”);
this.style.backgroundColor = “pink”;
});

// mouseout鼠标移出事件
artEle.addEventListener(“mouseout”,function(){
console.log(“mouseout”);
this.style.backgroundColor = “aqua”;
});
/
/
// 按下鼠标事件
secEle.addEventListener(“mousedown”,function(){
console.log(“mousedown”);
});

// 抬起鼠标事件
secEle.addEventListener(“mouseup”,function(){
console.log(“mouseup”);
});

// 移动鼠标事件
secEle.addEventListener(“mousemove”,function(e){
let event = e||window.event;
console.log(“mousemove”);
// event.clientX鼠标在浏览器水平位置
// event.clientY鼠标在浏览器垂直位置
console.log(event.clientX,event.clientY);
}); */

/*
// [事件对象的方法]
// 阻止默认事件event.preventDefault();
let aEle = document.querySelector(“a”);
aEle.addEventListener(“click”,function(e){
let event = e||window.event;
window.alert(“a被点击了！！”)
// 直接点击a标签会跳转，preventDefault可以消除默认的事件
event.preventDefault();
}); */

/*
// 阻止事件冒泡
// event.stopPropagation();
artEle.addEventListener(“click”,function(e){
let event = e||window.event;
event.stopPropagation();
console.log(“article”);
});

secEle.addEventListener(“click”,function(e){
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”);
}); */

// 阻止事件捕获(如果是true(由外到内的执行顺序)，只能获取到最外面的事件)
// event.stopImmediatePropagation();
artEle.addEventListener(“click”,function(e){
let event = e||window.event;
event.stopImmediatePropagation();
console.log(“article”);
},true);

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

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

//[页面事件]
// 页面加载时触发
window.addEventListener(“load”,function(){
console.log(“xxx”);
});

// 页面滚动条事件
window.addEventListener(“scroll”,function(){
// window.pageYOffset当前视口滚动条Y轴的移动距离
// window.pageXOffset当前视口滚动条X轴的移动距离
console.log(window.pageYOffset);
});

// 页面尺寸发生变化触发事件
window.addEventListener(“resize”,function(){
console.log(window.innerHeight,window.innerWidth);
})

let inpEle = document.querySelector(“input”);

//[表单事件]
// 焦点事件
inpEle.addEventListener(“focus”,function(e){
e.target.style.outline = “2px solid red”;
});

// 失去焦点 focusout也可以
inpEle.addEventListener(“blur”,function(e){
e.target.style.outline = “”;
});

// 输入事件(只要输入就触发)
inpEle.addEventListener(“input”,function(e){
let str = e.target.value;
console.log(“a”);
let re = /5/;
if(re.test(str)){
window.alert(“输入的字符不合法！！”);
}
});

// 内容发生变化时(失去焦点后,判断内容是否发生变化)
inpEle.addEventListener(“change”,function(){
console.log(“f70”);
})