Events

.on( event , handler [, options] )

Attach an event handler function for an event to the selected elements.

event
Type: String
A string containing a JavaScript event.
AMP allows only the following events to be supported:
Click
Change
Scroll
handler
Type: Function
A function to execute at the time the event is triggered.
options (optional)
Type: Object
A map of additional options to pass to the method.
enter (optional)
Type: String
Default: 1500px
Triggers the callback function when the user scrolls the page to this point
exit (optional)
Type: String
Default: 1500px
Triggers the callback function again when the user scrolls the page to this point.

Click event in aQuery:

Click events can be attached to all elements.

Example

$(‘button’).on(‘click’, (e) => {
console.log(‘event target: ’, e.target);
$(e.target).toggleClass(‘my-class’);
});

Scroll event in aQuery:

Since no javascript is allowed in AMP the support in scroll event is limited:

  1. The scroll event can only be attached to the window object.
  2. Only two trigger points can trigger the callback function: enter and exit (passed as 3rd parameter).
  3. Callback function can only execute the following actions:
    1. toggle
    2. slideToggle
      • slideUp
      • slideDown
      • slideLeft
      • slideRight

Example

$(window).on(‘scroll’, () => {
$(‘.sticky-footer’).toggle();
}, {enter: ‘1300px’, exit: ‘200px’});

Change event in aQuery:

Change events can be attached to all input and select elements. The value can be accessed through the event parameter being passed to the callback.

Example

$(‘select’).on('change', (e) => {
console.log(‘selected option value: ’, e.value);
$(window).open(e.value);
});

focus()

Trigger focus event to the selected elements.

Example

$(‘button’).on('click', (e) => {
$(‘input’).focus();
});
Edit this page