Event System

/**
 * Create function with bound context and optional pre-filled arguments
 * @param fn - Function to bind
 * @param context - Context (this) for function execution  
 * @param args - Optional arguments to pre-fill
 * @returns Bound function
 */
$.proxy(fn, context, ...args);

/**
 * Create Event object with specified type and properties
 * @param type - Event type string
 * @param props - Optional properties to set on event
 * @returns Event object
 */
$.Event(type, props);

// Context binding
const obj = {
  name: 'MyObject',
  greet: function() {
    console.log('Hello from ' + this.name);
  }
};

const boundGreet = $.proxy(obj.greet, obj);
boundGreet(); // "Hello from MyObject"

// Pre-filled arguments
function logMessage(type, message) {
  console.log(`[${type}] ${message}`);
}

const logError = $.proxy(logMessage, null, 'ERROR');
logError('Something went wrong'); // "[ERROR] Something went wrong"

// Custom event creation
const customEvent = $.Event('customEvent', {
  customProperty: 'customValue'
});

$('#element').trigger(customEvent);

/**
 * Attach event handlers to elements
 * @param event - Event type or space-separated types
 * @param selector - Optional selector for event delegation
 * @param data - Optional data to pass to handler
 * @param callback - Event handler function
 * @param one - Internal flag for one-time binding
 * @returns Original collection
 */
$.fn.on(event, selector, data, callback, one);

/**
 * Remove event handlers from elements
 * @param event - Event type or space-separated types (optional)
 * @param selector - Optional selector used in delegation
 * @param callback - Optional specific handler to remove
 * @returns Original collection
 */
$.fn.off(event, selector, callback);

/**
 * Attach event handler that executes only once
 * @param event - Event type
 * @param selector - Optional selector for delegation
 * @param data - Optional data to pass to handler
 * @param callback - Event handler function
 * @returns Original collection
 */
$.fn.one(event, selector, data, callback);

/**
 * Bind event handlers (legacy method, use 'on' instead)
 * @param event - Event type
 * @param data - Optional data to pass to handler
 * @param callback - Event handler function
 * @returns Original collection
 */
$.fn.bind(event, data, callback);

/**
 * Remove event handlers (legacy method, use 'off' instead)
 * @param event - Event type (optional)
 * @param callback - Optional specific handler to remove
 * @returns Original collection
 */
$.fn.unbind(event, callback);

// Basic event binding
$('.button').on('click', function(e) {
  console.log('Button clicked:', this);
});

// Event delegation
$('#container').on('click', '.dynamic-button', function(e) {
  console.log('Delegated click:', this);
});

// Multiple events
$('.element').on('mouseenter mouseleave', function(e) {
  $(this).toggleClass('hover');
});

// One-time handler
$('.trigger').one('click', function() {
  console.log('This will only run once');
});

// With data
$('.item').on('click', {id: 123}, function(e) {
  console.log('Item ID:', e.data.id);
});

/**
 * Delegate events to descendant elements
 * @param selector - Selector for elements to delegate to
 * @param event - Event type
 * @param callback - Event handler function
 * @returns Original collection
 */
$.fn.delegate(selector, event, callback);

/**
 * Remove delegated event handlers
 * @param selector - Selector used in delegation
 * @param event - Event type
 * @param callback - Optional specific handler to remove
 * @returns Original collection
 */
$.fn.undelegate(selector, event, callback);

/**
 * Live event binding (deprecated, use 'on' with delegation)
 * @param event - Event type
 * @param callback - Event handler function
 * @returns Original collection
 */
$.fn.live(event, callback);

/**
 * Remove live event handlers (deprecated)
 * @param event - Event type
 * @param callback - Optional specific handler to remove
 * @returns Original collection
 */
$.fn.die(event, callback);

/**
 * Trigger events on elements
 * @param event - Event type or Event object
 * @param args - Optional arguments to pass to handlers
 * @returns Original collection
 */
$.fn.trigger(event, args);

/**
 * Trigger event handlers without bubbling or default actions
 * @param event - Event type or Event object
 * @param args - Optional arguments to pass to handlers
 * @returns Result from last handler or undefined
 */
$.fn.triggerHandler(event, args);

// Trigger custom event
$('.element').trigger('customEvent', ['arg1', 'arg2']);

// Trigger with event object
const event = $.Event('click', {bubbles: true});
$('.button').trigger(event);

// Trigger handler only (no bubbling)
const result = $('.input').triggerHandler('focus');

/**
 * Bind or trigger click events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.click(callback);

/**
 * Bind or trigger double-click events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.dblclick(callback);

/**
 * Bind or trigger focus events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.focus(callback);

/**
 * Bind or trigger blur events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.blur(callback);

/**
 * Bind or trigger change events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.change(callback);

/**
 * Bind or trigger select events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.select(callback);

/**
 * Bind or trigger keydown events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.keydown(callback);

/**
 * Bind or trigger keypress events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.keypress(callback);

/**
 * Bind or trigger keyup events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.keyup(callback);

/**
 * Bind or trigger mousedown events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.mousedown(callback);

/**
 * Bind or trigger mouseup events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.mouseup(callback);

/**
 * Bind or trigger mousemove events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.mousemove(callback);

/**
 * Bind or trigger mouseover events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.mouseover(callback);

/**
 * Bind or trigger mouseout events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.mouseout(callback);

/**
 * Bind or trigger mouseenter events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.mouseenter(callback);

/**
 * Bind or trigger mouseleave events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.mouseleave(callback);

/**
 * Bind or trigger scroll events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.scroll(callback);

/**
 * Bind or trigger resize events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.resize(callback);

/**
 * Bind or trigger load events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.load(callback);

/**
 * Bind or trigger unload events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.unload(callback);

/**
 * Bind or trigger error events
 * @param callback - Optional event handler
 * @returns Original collection
 */
$.fn.error(callback);

// Event binding
$('.button').click(function() {
  console.log('Button clicked');
});

// Event triggering
$('.button').click(); // Trigger click event

// Form events
$('input').focus(function() {
  $(this).addClass('focused');
}).blur(function() {
  $(this).removeClass('focused');
});

// Keyboard events
$('input').keydown(function(e) {
  if (e.which === 13) { // Enter key
    $(this).closest('form').submit();
  }
});

/**
 * Create custom event objects
 * @param type - Event type
 * @param props - Optional event properties
 * @returns Event object
 */
$.Event(type, props);

/**
 * Bind function to specific context
 * @param fn - Function to bind
 * @param context - Context to bind to (this value)
 * @returns Bound function
 */
$.proxy(fn, context);

/**
 * Event utilities object
 */
$.event; // Contains add, remove methods for internal use

// Custom event creation
const customEvent = $.Event('customType', {
  bubbles: true,
  cancelable: true,
  detail: {info: 'custom data'}
});
$('.element').trigger(customEvent);

// Function binding
const obj = {
  name: 'Example',
  greet: function() {
    console.log('Hello from ' + this.name);
  }
};

$('.button').on('click', $.proxy(obj.greet, obj));
// or
$('.button').on('click', $.proxy('greet', obj));

// Event handler signature
function eventHandler(event) {
  // 'this' refers to the DOM element
  // 'event' is the event object with properties:
  //   - type: event type
  //   - target: element that triggered event
  //   - currentTarget: element handler is attached to
  //   - which: key/button code
  //   - pageX, pageY: mouse coordinates
  //   - preventDefault(): prevent default action
  //   - stopPropagation(): stop event bubbling
  //   - data: data passed during binding
}

$('.link').on('click', function(e) {
  e.preventDefault(); // Prevent link navigation
  console.log('Clicked element:', this);
  console.log('Event type:', e.type);
  console.log('Mouse position:', e.pageX, e.pageY);
});

$('.item').on('keydown', function(e) {
  if (e.which === 27) { // Escape key
    $(this).hide();
  }
});

// Use event delegation for dynamic content
$('#container').on('click', '.dynamic-item', handler);

// Remove event handlers when no longer needed
$('.temporary').off('click.namespace');

// Use namespaced events for easier management
$('.element').on('click.myNamespace', handler);
$('.element').off('.myNamespace'); // Remove all namespaced events

// Throttle high-frequency events
let scrollTimeout;
$(window).on('scroll', function() {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(function() {
    // Handle scroll
  }, 100);
});