target

简介

target是ArriveBehavior的一个配置选项，用于指定需要监听的DOM元素。该选项可以接收如下值：

• 字符串：当传入字符串时，ArriveBehavior会将其作为选择器，并在文档中查找匹配该选择器的元素。所有匹配的元素都将被监听。
• HTMLElement实例：当传入HTMLElement实例时，ArriveBehavior会针对该元素进行监听。

示例

代码

以下示例演示如何指定要监听的元素，其中toc是一个已存在于DOM中的元素。

// 使用字符串选择器指定监听元素
arrive('.my-class', function () {
  console.log('监听到元素出现');
})

// 使用HTMLElement实例指定监听元素
arrive(toc, function () {
  console.log('监听到元素出现');
})

效果

当使用字符串选择器指定监听元素时，如果文档中存在样式类名为my-class的元素，则会被监听：

<div class="my-class">我是被监听的元素</div>

当使用HTMLElement实例指定监听元素时，监听器将对传入的元素进行监听：

<div id="toc">我是被监听的元素</div>
<script>
  const toc = document.getElementById('toc')
  
  arrive(toc, function () {
    console.log('监听到元素出现');
  })
</script>

注意事项

• target选项如果未指定，在调用ArriveBehavior时会自动将document.body作为监听元素。但是，应该尽量避免在document.body上使用监听器。
• 当使用字符串选择器进行匹配时，ArriveBehavior提供的选择器支持大多数现代浏览器支持的选择器，包括CSS3选择器、部分CSS4选择器以及一些jQuery扩展的选择器。如果一些选择器无法正常匹配，可能是因为您的浏览器不支持该选择器。
• 当使用字符串选择器进行匹配时，尽量避免使用通配符*，因为这会使匹配变慢。最好尽可能减少选择器的常规匹配。

参考链接

• Arrive | Github