DOM 事件处理资料索引

• 移动 Web 之触摸和指针事件详解

• 阮一峰 JavaScript 标准参考教材之 DOM 中的事件

• 前端进阶之路：点击事件绑定

• 如何让 H5 体验接近 APP：(一)触摸反馈

Event Handle

Event Delegation

• JavaScript 事件冒泡与事件捕获

• How JavaScript Event Delegation Works

• Event Delegation versus Event Handling

• jQuery.delegate is event delegation + selector specification

• jQuery.on uses event delegation when passed a selector as the 2nd parameter

• Event delegation without a JavaScript library

• Closures vs Event delegation: takes a look at the pros of not converting code to use event delegation

• Interesting approach PPK uncovered for delegating the focus and blur events (which do notbubble)

Event Type

Touch Event

• Introduction to Touch events in JavaScript

DnD | 拖拽事件

• 2015-dragula: Drag and drop so simple it hurts

• Rethinking drag and drop Taking something basic and making it beautiful

• 2010-Native HTML5 Drag and Drop: Drag and drop (DnD) is a first class citizen in HTML5! The spec defines an event-based mechanism, JavaScript API, and additional markup for declaring that just about any type of element be draggable on a page.

• 超小 Web 手势库 AlloyFinger 原理

Scroll & Visibility: 滚动事件与可见性

• Complexities of an Infinite Scroller

• react-springy-parallax: A springy, composable parallax-scroller for React.

• react-waypoint: A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window.

• Lucifier129: pull-element: Lightweight, high-performance and smooth pull element effect that support all directions

• 移动 Web 滚动性能优化: Passive event listeners

• iScroll :高性能的多平台 JS 滚动条

• React-iScroll

• jquery.nicescroll:基于 jQuery 的滚动插件

Parallaxing

• 2016-Performant Parallaxing: In this article we’ll discuss a solution that is both performant and, just as importantly, works cross-browser

ScrollSpy | 滚动监听

• React Visibility Sensor : Sensor component for React that notifies you when it goes in or out of the window viewport.

• Build a Custom JavaScript Scrollspy Navigation

• InView: 自动判断某个元素是否在 ViewPort 内

Observer

IntersectionObserver

• 2017-IntersectionObserver’s Coming into View: Making this visibility test more efficient is what IntersectionObserver was designed for.

• 2018-Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver: In this article, we are going to go out of the scroll darkness and talk about the modern way of lazy-loading resources.

MutationObserver

• How JavaScript works: tracking changes in the DOM using MutationObserver