CxJS如何监听onWheel事件

本文详细介绍了在CxJS框架中如何为`onWheel`事件添加主动监听器，以解决默认被动监听器无法调用`preventDefault()`方法的问题。针对需要在`onWheel`事件中阻止页面默认滚动行为的场景，文章提供了清晰的步骤指导：首先，利用`onRef`属性获取DOM元素引用；其次，借助CxJS提供的`addEventListenerWithOptions`方法，配置`passive: false`选项，从而实现主动监听。同时，文中强调了使用主动监听器可能带来的性能影响，并建议仅在必要时使用，并在组件卸载时移除监听器，避免内存泄漏。通过本文，开发者可以掌握在CxJS中灵活控制`onWheel`事件，实现自定义滚动行为的有效方法。

本文介绍了在 CxJS 中为 `onWheel` 事件添加主动监听器的方法，以解决默认情况下 `onWheel` 为被动监听器导致无法调用 `preventDefault` 的问题。通过使用 `onRef` 属性获取元素引用，并结合 CxJS 提供的 `addEventListenerWithOptions` 方法，可以轻松实现主动监听，从而控制滚动行为。

在 React (CxJS 基于 React) 中，onWheel 事件默认是被动监听器（passive event listener）。这意味着浏览器可以在不阻塞主线程的情况下处理滚动事件，从而提高页面性能。然而，被动监听器不允许调用 preventDefault() 方法来阻止默认的滚动行为。如果你需要在 onWheel 事件中阻止滚动，就需要使用主动监听器。

CxJS 提供了一种方便的方法来解决这个问题，即使用 onRef 属性和 addEventListenerWithOptions 方法。

步骤 1: 使用 onRef 获取元素引用

onRef 属性允许你获取组件渲染的底层 DOM 元素的引用。你可以将一个回调函数赋值给 onRef 属性，该回调函数将在元素挂载后被调用，并将元素作为参数传递。

<div onRef={el => this.element = el}>
  ...
</div>

在上面的代码中，this.element 将在 div 元素挂载后被设置为该元素的引用。

步骤 2: 使用 addEventListenerWithOptions 添加主动监听器

CxJS 提供了一个名为 addEventListenerWithOptions 的工具函数，它可以让你添加具有特定选项的事件监听器。这包括设置监听器为主动监听器。

首先，你需要从 cx/util 导入 addEventListenerWithOptions。

import { addEventListenerWithOptions } from 'cx/util';

然后，你可以使用以下代码添加一个主动的 wheel 事件监听器：

import { addEventListenerWithOptions } from 'cx/util';

let unsubscribeScroll: () => void;

addElementListener(el: Element) {
    if (unsubscribeScroll) unsubscribeScroll();
    if (!el) return;
    unsubscribeScroll = addEventListenerWithOptions(
    el,
    'wheel',
    (e: any) => {
        e.preventDefault();
             // 在此处添加你的滚动处理逻辑
       },
     { passive: false }
    );
}

<div onRef='addElementListener'>
  ...
</div>

代码解释：

• addEventListenerWithOptions(el, 'wheel', callback, options): 这个函数接受四个参数：
  • el: 要添加监听器的 DOM 元素。
  • 'wheel': 要监听的事件类型。
  • callback: 事件触发时要执行的回调函数。
  • options: 一个包含配置选项的对象。 在这里，我们设置 passive: false 来创建一个主动监听器。
• e.preventDefault(): 阻止默认的滚动行为。 这只有在主动监听器中才有效。
• unsubscribeScroll: 用于存储取消订阅的函数，以便在元素卸载或重新渲染时清除之前的监听器。

完整示例：

import { Widget, HtmlElement } from 'cx/ui';
import { addEventListenerWithOptions } from 'cx/util';

class MyComponent extends Widget {
    declareData() {
        super.declareData(...arguments);
        this.declareData({
            element: null
        })
    }

    addElementListener(el: Element) {
        if (this.unsubscribeScroll) this.unsubscribeScroll();
        if (!el) return;
        this.unsubscribeScroll = addEventListenerWithOptions(
            el,
            'wheel',
            (e: any) => {
                e.preventDefault();
                console.log('滚动事件触发，阻止默认行为');
            },
            { passive: false }
        );
    }

    onComponentWillUnmount() {
        super.onComponentWillUnmount();
        if (this.unsubscribeScroll) {
            this.unsubscribeScroll();
            this.unsubscribeScroll = null;
        }
    }


    render() {
        return (
            <cx>
                <div onRef={el => this.addElementListener(el)} style="height: 200px; overflow: auto;">
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                    <p>尝试滚动我，默认行为将被阻止。</p>
                </div>
            </cx>
        );
    }
}

注意事项：

• 使用主动监听器可能会影响页面性能，因为浏览器必须等待监听器执行完毕才能继续处理滚动。 因此，只有在真正需要阻止默认滚动行为时才应使用主动监听器。
• 确保在组件卸载时移除事件监听器，以避免内存泄漏。 可以使用 onComponentWillUnmount 生命周期方法来移除监听器。

总结：

通过使用 onRef 属性和 addEventListenerWithOptions 方法，你可以轻松地在 CxJS 中为 onWheel 事件添加主动监听器，并阻止默认的滚动行为。 请记住，只有在真正需要阻止滚动时才应使用主动监听器，并确保在组件卸载时移除监听器。 这个方法同样适用于其他需要主动监听器的事件类型。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CxJS如何监听onWheel事件》文章吧，也可关注golang学习网公众号了解相关技术文章。