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