大致介绍

jQuery增加了并扩展了基本的事件处理机制，不但提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力

jQuery中的事件

加载DOM

在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的，但是他们也有一些不同点

1、执行时机

例如我们有一个有很多图片的网页

$(document).ready()方法是在这个网页的DOM树加载完就可以执行的，而window.onload方法必须在DOM树加载完和图片都加载完才执行

如果使用jQuery我们想要在整个页面加载完在执行可以使用load()方法

下面两段代码的功能是一样的

      // jQuery
      $(window).load(function(){
        // 代码1
      });
      // JavaScript
      window.onload = function(){
        // 代码2
      };

2、多次使用

JavaScript的onload事件一次只能保存对一个函数的引用，而$(document).ready()可以保存多个

      function one(){
        alert('1');
      }
      function two(){
        alert('2');
      }
      // JavaScript
      window.onload = one;
      window.onload = two;//只执行two()
      // jQuery
      $(document).ready(function(){
        one();
      });
      $(document).ready(function(){
        two();
      });//one() 和 two()都会执行

3、简写方式

$(document).ready(function(){});可以简写为$(function(){});

事件绑定

bind()函数的语法：bind(type,[.data],fn)

第一个参数是事件类型

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象

第三个参数是用来绑定的处理函数

用例子来看，有两个div，第二个div隐藏，当我们点击第一个div时，第二个div显示

  <div id="div1"></div>
  <div id="div2"></div>
  <script type="text/javascript">
  $(function(){
    $('#div1').bind('click',function(){
      $(this).next().show();
    });
    
  });

增加功能，当点击div1时如果div2是显示的，则隐藏它，否则就显示它

  $(function(){
    $('#div1').bind('click',function(){
      if($(this).next().is(':visible')){
        $(this).next().hide();
      }else{
        $(this).next().show();
      }
    });
  });

简写：

    $('#div1').click(function(){
      if($(this).next().is(':visible')){
         $(this).next().hide();
       }else{
         $(this).next().show();
       }
    })

合成事件

1、hover()方法

用于模拟光标悬停事件。当光标移动到元素上时触发第一个函数，当光标移出元素时，会触发第二个函数

    $('#div1').hover(function(){
      $(this).next().show();
    },function(){
      $(this).next().hide();
    });

2、toggle()方法

用于模拟鼠标连续单击事件，当鼠标第一次点击元素，触发第一个函数，当鼠标点击同一个函数时触发第二个函数

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
}); 

阻止事件冒泡和阻止默认行为

1、阻止事件冒泡 

stopPropagation()方法

2、阻止默认行为

preventDefault()方法

注意：1、return false 在jQuery中是即阻止事件冒泡又阻止默认行为

　　　2、jQuery不支持事件捕获

事件对象的属性

1、event.type

　　　改方法的作用是获取到事件的类型

   $('#div1').click(function(ev){
      alert(ev.type);//click
    })

2、event.target

获取到触发事件的元素

 $('#div1').click(function(ev){
   alert(ev.target.id);//div1
  })

3、event.relatedTarget

获取相关元素

4、event.pageX和event.pageY

获取到光标相对于页面的x的坐标和y的坐标

  $('#div1').click(function(ev){
   alert(ev.pageX + ',' + ev.pageY);//275,181
   })

5、event.which

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键，2是鼠标中见，3是鼠标右键
})

移除事件

 unbind()方法语法： unbind([type],[data]);

　第1个参数是事件类型，第2个参数是将要移除的函数

　看一个例子，为div1绑定如下事件

    $('#div1').bind('click',function(){
      alert('1');
    }).bind('click',function(){
      alert('2');
    }).bind('mouseover',function(){
      alert('3');
    })

   1、如果没有参数，则删除所有绑定的事件

       $('#div1').unbind();//删除所有事件

    2、如果提供了事件类型作为参数，则只删除该类型的绑定事件

        $('#div1').unbind('mouseover');//删除mouseover事件

    3、如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的时间处理函数会被删除

模拟操作

1、常用模拟

在jQuery中可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件

$('#btn').trigger('click');

2、触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

3、传递数据

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

4、执行默认操作

$('input').trigger('focus');

以上代码会触发input元素的focus事件，也会使<input>元素本身得到焦点

如果只想触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作可以使用triggerHandler()方法

其他用法

添加事件命名空间，便于管理

例如可以把元素绑定的多个事件类型用命名空间规范起来

    $('div').bind('click.plugin',function(){
      alert('1');
    });
    $('div').bind('mouseover.plugin',function(){
      alert('2');
    });
    $('div').bind('dbclick.plugin',function(){
      alert('3');
    });
    $('button').click(function(){
      $('div').unbind('.plugin');
    })

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jquery  # 事件  # 基于jQuery的select下拉框选择触发事件实例分析  # jQuery绑定事件的四种方式介绍  # 浅谈jquery之on()绑定事件和off()解除绑定事件  # jquery移除了live()、die()  # 新版事件绑定on()、off()的方法  # jquery文档操作wrap()方法实例简述  # Lazy Load 延迟加载图片的jQuery插件中文使用文档  # jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍  # jQuery EasyUI API 中文文档 - Tree树使用介绍  # jQuery EasyUI API 中文文档 - DataGrid数据表格  # 详解Jquery的事件操作和文档操作  # 绑定  # 第二个  # 第一个  # 鼠标  # 可以使用  # 加载  # 是在  # 多个  # 自定义  # 单击  # 移除  # 当鼠标  # 也有  # 有很多  # 右键  # 如果没有  # 事件中  # 只想  # 鼠标右键  # 不支持 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  jQuery validate插件功能与用法详解  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  使用豆包 AI 辅助进行简单网页 HTML 结构设计  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  如何生成腾讯云建站专用兑换码？  如何快速搭建支持数据库操作的智能建站平台？  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  Thinkphp 中 distinct 的用法解析  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  图册素材网站设计制作软件,图册的导出方式有几种？  Python函数文档自动校验_规范解析【教程】  SQL查询语句优化的实用方法总结  香港网站服务器数量如何影响SEO优化效果？  微信小程序 HTTPS报错整理常见问题及解决方案  Laravel如何处理文件下载请求？（Response示例）  微信小程序 canvas开发实例及注意事项  详解jQuery中的事件  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  Windows Hello人脸识别突然无法使用  Laravel如何发送系统通知？（Notification渠道示例）  Laravel storage目录权限问题_Laravel文件写入权限设置  香港服务器如何优化才能显著提升网站加载速度？  微信小程序 wx.uploadFile无法上传解决办法  北京企业网站设计制作公司,北京铁路集团官方网站？  深圳网站制作平台,深圳市做网站好的公司有哪些？  详解Oracle修改字段类型方法总结  敲碗10年！Mac系列传将迎来「触控与联网」双革新  大学网站设计制作软件有哪些,如何将网站制作成自己app？  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Laravel安装步骤详细教程_Laravel环境搭建指南  Laravel如何实现API版本控制_Laravel版本化API设计方案  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  javascript基于原型链的继承及call和apply函数用法分析  Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  如何快速生成可下载的建站源码工具？  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  如何用PHP快速搭建CMS系统？  高防服务器：AI智能防御DDoS攻击与数据安全保障  大同网页,大同瑞慈医院官网？  LinuxCD持续部署教程_自动发布与回滚机制  Android 常见的图片加载框架详细介绍  如何在宝塔面板中创建新站点？