跳至主要內容

jquery怎么处理事件的，有哪些事件

pax大约 4 分钟

jQuery 事件处理详解

1. 事件绑定方法

基本事件绑定

// 使用 on() 方法（推荐）
$('#button').on('click', function() {
  console.log('按钮被点击了');
});

// 直接使用事件方法（快捷方式）
$('#button').click(function() {
  console.log('按钮被点击了');
});

事件委托

// 为动态添加的元素绑定事件
$(document).on('click', '.dynamic-button', function() {
  console.log('动态按钮被点击');
});

// 在父元素上委托事件
$('#container').on('click', 'button', function() {
  console.log('容器内的按钮被点击');
});

一次性事件

// 事件只触发一次
$('#button').one('click', function() {
  console.log('这个事件只会触发一次');
});

2. 移除事件

// 移除特定事件
$('#button').off('click');

// 移除所有事件
$('#button').off();

// 移除特定命名空间的事件
$('#button').off('click.myNamespace');

// 使用事件命名空间
$('#button').on('click.myNamespace', function() {
  console.log('命名空间事件');
});

3. 常用事件类型

鼠标事件

// 点击事件
$('#element').click(function() {
  console.log('点击事件');
});

// 双击事件
$('#element').dblclick(function() {
  console.log('双击事件');
});

// 鼠标按下
$('#element').mousedown(function() {
  console.log('鼠标按下');
});

// 鼠标释放
$('#element').mouseup(function() {
  console.log('鼠标释放');
});

// 鼠标进入
$('#element').mouseenter(function() {
  console.log('鼠标进入');
});

// 鼠标离开
$('#element').mouseleave(function() {
  console.log('鼠标离开');
});

// 鼠标移动
$('#element').mousemove(function(e) {
  console.log('鼠标位置:', e.pageX, e.pageY);
});

// 鼠标悬停（mouseenter + mouseleave）
$('#element').hover(
  function() {
    console.log('鼠标进入');
  },
  function() {
    console.log('鼠标离开');
  }
);

键盘事件

// 键盘按下
$('#input').keydown(function(e) {
  console.log('键码:', e.keyCode);
});

// 键盘释放
$('#input').keyup(function(e) {
  console.log('键码:', e.keyCode);
});

// 字符输入
$('#input').keypress(function(e) {
  console.log('字符码:', e.which);
});

表单事件

// 表单提交
$('#form').submit(function(e) {
  e.preventDefault(); // 阻止默认提交
  console.log('表单提交');
});

// 输入框内容改变
$('#input').change(function() {
  console.log('内容改变:', $(this).val());
});

// 输入框获得焦点
$('#input').focus(function() {
  console.log('获得焦点');
});

// 输入框失去焦点
$('#input').blur(function() {
  console.log('失去焦点');
});

// 输入框内容正在输入
$('#input').input(function() {
  console.log('正在输入');
});

// 选择文本
$('#input').select(function() {
  console.log('文本被选择');
});

页面事件

// 文档加载完成
$(document).ready(function() {
  console.log('DOM 加载完成');
});

// 简写形式
$(function() {
  console.log('DOM 加载完成');
});

// 窗口加载完成（包括图片等资源）
$(window).load(function() {
  console.log('页面完全加载完成');
});

// 窗口大小改变
$(window).resize(function() {
  console.log('窗口大小改变');
});

// 窗口滚动
$(window).scroll(function() {
  console.log('窗口滚动');
});

// 页面卸载前
$(window).unload(function() {
  console.log('页面即将卸载');
});

// 页面即将离开
$(window).beforeunload(function() {
  return '确定要离开吗？';
});

触摸事件（移动端）

// 触摸开始
$('#element').on('touchstart', function() {
  console.log('触摸开始');
});

// 触摸移动
$('#element').on('touchmove', function() {
  console.log('触摸移动');
});

// 触摸结束
$('#element').on('touchend', function() {
  console.log('触摸结束');
});

4. 事件对象

$('#button').click(function(event) {
  // 阻止默认行为
  event.preventDefault();
  
  // 阻止事件冒泡
  event.stopPropagation();
  
  // 获取事件目标
  console.log('事件目标:', event.target);
  
  // 获取当前处理事件的元素
  console.log('当前元素:', event.currentTarget);
  
  // 鼠标坐标
  console.log('页面坐标:', event.pageX, event.pageY);
  console.log('客户端坐标:', event.clientX, event.clientY);
  
  // 键盘事件相关
  console.log('是否按下 Ctrl:', event.ctrlKey);
  console.log('是否按下 Shift:', event.shiftKey);
  console.log('是否按下 Alt:', event.altKey);
});

5. 自定义事件

// 触发自定义事件
$('#element').on('myCustomEvent', function(event, param1, param2) {
  console.log('自定义事件触发:', param1, param2);
});

// 触发自定义事件
$('#element').trigger('myCustomEvent', ['参数1', '参数2']);

// 使用 triggerHandler（不会触发浏览器默认行为）
$('#element').triggerHandler('myCustomEvent', ['参数1', '参数2']);

6. 事件命名空间

// 使用命名空间绑定事件
$('#button').on('click.namespace1', function() {
  console.log('命名空间1的点击事件');
});

$('#button').on('click.namespace2', function() {
  console.log('命名空间2的点击事件');
});

// 移除特定命名空间的事件
$('#button').off('click.namespace1');

// 移除所有命名空间的点击事件
$('#button').off('click');

7. 实际应用示例

表单验证

$('#registrationForm').on('submit', function(e) {
  var isValid = true;
  
  // 验证用户名
  if ($('#username').val().length < 3) {
    isValid = false;
    $('#username').addClass('error');
  }
  
  // 验证邮箱
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test($('#email').val())) {
    isValid = false;
    $('#email').addClass('error');
  }
  
  if (!isValid) {
    e.preventDefault();
    alert('请检查表单内容');
  }
});

// 实时验证
$('#username').on('blur', function() {
  if ($(this).val().length < 3) {
    $(this).addClass('error');
  } else {
    $(this).removeClass('error');
  }
});

动态内容交互

// 为动态添加的按钮绑定事件
$(document).on('click', '.delete-btn', function() {
  var $row = $(this).closest('.data-row');
  $row.fadeOut(function() {
    $row.remove();
  });
});

// 悬停显示更多信息
$(document).on('mouseenter', '.item', function() {
  $(this).find('.details').show();
}).on('mouseleave', '.item', function() {
  $(this).find('.details').hide();
});

8. 事件性能优化

// 使用事件委托处理大量元素
$('#list').on('click', 'li', function() {
  console.log('列表项被点击:', $(this).text());
});

// 避免重复绑定事件
$('#button').off('click.myApp').on('click.myApp', function() {
  console.log('确保只绑定一次的事件');
});

// 节流处理高频事件
var throttle = function(func, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
};

$(window).on('scroll', throttle(function() {
  console.log('滚动事件（节流）');
}, 100));

jQuery 的事件处理系统提供了强大而灵活的功能，通过这些方法可以轻松处理各种用户交互和页面事件。选择合适的方法和事件类型对于构建响应式和高效的 Web 应用至关重要。

默认页脚
Copyright © 2026 pax