js get mouse scroll event All In One

js get mouse scroll event All In One

wheel event

🖱️ 鼠标滚动/鼠标滑动

function zoom(e) {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);
  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector('div');


el.onwheel = zoom;

function zoom(e) {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);
  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector('div');

el.addEventListener('wheel', zoom);

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event

mouse events

const log = console.log;

log('app init');

const time = new Date().toLocaleString();

let count = 1;

const monitorLog = (obj = {}, text = '') => {
  count += 1;
  obj.count = count;
  obj.time = time;
  // feature support detect
  if (!navigator.sendBeacon) {
      // XHR fallback
      const url = 'http://localhost:3000/api/post';
      // this.loading = true;
      fetch(url, {
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
        // mode: "no-cors",
        mode: "cors",
        cache: "no-cache",
        body: JSON.stringify(obj),
      })
      .then(res => console.log(`res =`, res))
      .catch(err => console.error(`error =`, err))
      .finally(() => {
        // this.loading = false;
      });
      // return true;
  } else {
    const url = 'http://localhost:3000/api/beacon';
    // Content-Type: application/x-www-form-urlencoded
    // const data = new FormData();
    // const keys = Object.keys(obj);
    // for (const key of keys) {
    //   data.append(key, obj[key]);
    // }
    // if(text) {
    //   data.append('desc', text);
    // }
    // console.log(`Beacon API 🔥 数据上报 = ${JSON.stringify(obj, null, 4)}`);
    // application/json
    const data = new Blob(
      [JSON.stringify(obj, null, 4)],
      // [JSON.stringify(obj, null, 2)],
      // [JSON.stringify(obj)],
      {
        type : 'application/json',
        // endings: 'native',
      },
    );
    navigator.sendBeacon(url, data);
  }
};

// 1. keyboard events
document.addEventListener('keydown', (e) => {
  // console.log('keydown e', e);
  const obj = {
    desc: "⌨️ 键盘事件",
    event: "keydown",
  };
  monitorLog(obj, 'keydown');
});
document.addEventListener('keyup', (e) => {
  // console.log('keyup e', e);
  const obj = {
    desc: "⌨️ 键盘事件",
    event: "keyup",
  };
  monitorLog(obj, 'keyup');
});
document.addEventListener('keypress', (e) => {
  // console.log('keypress e', e);
  const obj = {
    desc: "⌨️ 键盘事件",
    event: "keypress",
  };
  monitorLog(obj, 'keypress');
});

// 2. mouse events
document.addEventListener('click', (e) => {
  // console.log('mouse click e', e);
  const obj = {
    desc: "🖱️ 鼠标事件",
    event: "click",
  };
  monitorLog(obj, 'click');
});
document.addEventListener('dblclick', (e) => {
  // console.log('mouse dblclick e', e);
  const obj = {
    desc: "🖱️ 鼠标事件",
    event: "dblclick",
  };
  monitorLog(obj, 'dblclick');
});
document.addEventListener('mouseup', (e) => {
  // console.log('mouse up e', e);
  const obj = {
    desc: "🖱️ 鼠标事件",
    event: "mouseup",
  };
  monitorLog(obj, 'mouseup');
});
document.addEventListener('mousedown', (e) => {
  // console.log('mouse down e', e);
  const obj = {
    desc: "🖱️ 鼠标事件",
    event: "mousedown",
  };
  monitorLog(obj, 'mousedown');
});
document.addEventListener('mousemove', (e) => {
  // console.log('mouse move e', e);
  const obj = {
    desc: "🖱️ 鼠标事件",
    event: "mousemove",
  };
  monitorLog(obj, 'mousemove');
});

// contextmenu 右键 keycode ??? click copy

// 3. pointer events
// document.addEventListener('pointerdown', (e) => {
//   // console.log('pointer down', e);
//   const obj = {
//     desc: "🤚 光标事件",
//     event: "pointerdown",
//   };
//   monitorLog(obj, 'pointerdown');
// });
// document.addEventListener('pointerup', (e) => {
//   // console.log('pointer up', e);
//   const obj = {
//     desc: "🤚 光标事件",
//     event: "pointerup",
//   };
//   monitorLog(obj, 'pointerup');
// });
// document.addEventListener('pointermove', (e) => {
//   // console.log('pointer move', e);
//   const obj = {
//     desc: "🤚 光标事件",
//     event: "pointermove",
//   };
//   monitorLog(obj, 'pointermove');
// });
// document.addEventListener('pointerover', (e) => {
//   // console.log('pointer over', e);
//   const obj = {
//     desc: "🤚 光标事件",
//     event: "pointerover",
//   };
//   monitorLog(obj, 'pointerover');
// });
// document.addEventListener('pointerout', (e) => {
//   // console.log('pointer out', e);
//   const obj = {
//     desc: "🤚 光标事件",
//     event: "pointerout",
//   };
//   monitorLog(obj, 'pointerout');
// });
// document.addEventListener('pointerenter', (e) => {
//   // console.log('pointer enter', e);
//   const obj = {
//     desc: "🤚 光标事件",
//     event: "pointerenter",
//   };
//   monitorLog(obj, 'pointerenter');
// });
// document.addEventListener('pointerleave', (e) => {
//   // console.log('pointer leave', e);
//   const obj = {
//     desc: "🤚 光标事件",
//     event: "pointerleave",
//   };
//   monitorLog(obj, 'pointerleave');
// });

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---