事件委托与常用事件类型

事件代理//委托

将事件绑定到父元素或者祖先元素，当子元素或者后代元素触发事件时，执行事件代理的函数

注：事件处理函数中的this指向是绑定的元素节点

适用场景：

1.多个子元素，绑定相同事件类型、执行同一个事件处理函数

2.子元素是动态

nodeName元素名大写

localName元素名小写

let olEle = document.querySelector("ol");
olEle.addEventListener("click", function (e) {
  if(e.target.nodeName == "LI"){//nodeName元素名大写
  e.target.classList.toggle("box");
  }
  if(e.target.localName == "p"){//localName元素名小写
  e.target.classList.toggle("box1");
  }
})

鼠标事件

点击事件

//click点击事件
artEle.addEventListener("click",function(){
    console.log("click");
});
//dblclick 双击鼠标
artEle.addEventListener("dblclick",function(){
    console.log("dblclick");
});

鼠标移入移出

mouseover、mouseout会考虑子元素

mouseenter、mouseleave不会考虑子元素

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

// 鼠标移入事件（不考虑子元素）
artEle.addEventListener("mouseenter",function(){
    console.log("mouseenter");
    this.style.backgroundColor = "deeppink";
});
// 鼠标移出事件（不考虑子元素）
artEle.addEventListener("mousleave",function(){
    console.log("mousleave");
    this.style.backgroundColor = "chocolate";
});
// 鼠标移入事件（考虑子元素）
artEle.addEventListener("mouseover",function(){
    console.log("mouseover");
    this.style.backgroundColor = "deeppink";
});
// 鼠标移出事件（考虑子元素）
artEle.addEventListener("mouseout",function(){
    console.log("mouseout");
    this.style.backgroundColor = "chocolate";
});

鼠标按下和抬起

//鼠标按下时事件
secEle.addEventListener("mousedown",function(){
console.log("mousedown");
});
//鼠标抬起时事件
secEle.addEventListener("mouseup",function(){
    console.log("mouseup");
});

鼠标移动事件

// 鼠标移动事件
secEle.addEventListener("mousemove",function(){
    console.log("mousemove");
});

检测鼠标位置：client

与page的区别，page拿的是鼠标在当前页面的位置

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

// 【阻止默认事件】
let aEle = document.getElementsByTagName("a")[0];
aEle.addEventListener("click",function(e){
    let event = e || window.event;
    window.alert("a被单击了!");
    event.preventDefault();
})

阻止冒泡事件--------event.stopPropagation();

//阻止冒泡事件
secEle.addEventListener("click",function(){
    let event = e || window.event;
    event.stopPropagation();
    console.log("section");
},false);

阻止捕获事件-------event.stopImmediatePropagation();

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

键盘事件

**注：**最好是给整个DOM(所有文档，即document)添加事件

keydown键盘按下时

document.addEventListener("keydown",function(e){
  console.log("按下",e.key,e.keyCode);
});

keyup键盘抬起时

document.addEventListener("keyup",function(e){
  console.log("抬起");
});

keypress只识别字符键(数字、字母、标点符号、回车)

document.addEventListener("keypress",function(e){
  console.log("按键盘");
});

keyCode是每个键对应的编码，可以以此来判断按下的是哪个键

焦点事件

焦点事件：focus

inpEle.addEventListener("focus", function (e) {

  e.target.style.outline = "2px solid bule";

});

输入事件(只要输入内容就变化)：input

inpEle.addEventListener("input", function (e) {
  let str = e.target.value;
  let re = /2/;
  if (re.test(str)) {
  window.alert("用户输入错误!请重新输入")
  }
});

失去焦点：blur

inpEle.addEventListener("blur", function (e) {
  e.target.style.outline = "";
});

内容发生变化(失去焦点后，判断内容是否发生变化)：change

inpEle.addEventListener("change", function (e) {
  console.log("阿良");
});

页面事件

事件添加在页面（window）身上

页面加载时触发：load

// 页面加载时触发
window.addEventListener("load",function(){
    console.log("阿良");
})

页面滚动条事件：scroll

//页面滚动条事件
aliang.style.display = "none"
window.addEventListener("scroll", function () {
    if (window.pageYOffset > 200) {
        aliang.style.display = "block";
    } else {
        aliang.style.display = "none"
    }
})

页面尺寸发生变化时触发事件：resize

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