---
name: "up:fragment:hungry"
area: "API"
kind: "DOM event"
parent: "up.radio module"
url: "https://unpoly.com/api/up:fragment:hungry"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.radio module](https://unpoly.com/api/up.radio.md)</nav>

# up:fragment:hungry

Before an [`[up-hungry]`](https://unpoly.com/api/up-hungry.md) element is added to a render pass, an event `up:fragment:hungry` is emitted on that element.

<nav aria-label="Guides">

- [Learn: Hungry elements](https://unpoly.com/learn/hungry-elements.md#conditions)

</nav>

## Preventing hungry elements from being updated {#preventing-hungry-elements-from-being-updated}

You may prevent the `up:fragment:hungry` event to exclude a hungry element from the render pass. Use this to define arbitrary conditions for when a hungry element should be updated.

For example, the following would update a hungry element only for render passes that [update history](https://unpoly.com/learn/updating-history.md):

```js
element.addEventListener('up:fragment:hungry', function(event) {
  if (!event.renderOptions.history) event.preventDefault()
})
```

You may also define conditions based on the _new_ element that a hungry element would be swapped with. The following would skip an update if the new element has the class `.is-empty`:

```js
element.addEventListener('up:fragment:hungry', function(event) {
  if (event.newFragment.classList.contains('is-empty')) {
    event.preventDefault()
  }
})
```

---

## Event properties {#properties}

### event.target {#event.target}

(required)

The hungry element that is about to be swapped.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### event.newFragment {#event.newFragment}

(required)

The fragment in the new content that this hungry element would be swapped with.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### event.renderOptions {#event.renderOptions}

(required)

The [render options](https://unpoly.com/api/up.render.md#parameters) for the current render pass.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

### event.preventDefault() {#event.preventDefault}

(required)

Prevents the hungry element from being targeted in the current render pass.