欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery事件处理了解一下

程序员文章站 2022-08-10 08:46:57
>>> JQuery 事件处理 >>> JQuery 事件处理 一、事件绑定方式 一、事件绑定方式 1、事件绑定的快捷方式: 缺点:绑定的事件,无法取消 2、使用on进行事件绑定 ① 使用on进行单事件绑定 ② 使用on,同时给多个事件绑定同一函数 ③ 使用on,同时给多个事件分别绑定不同的函数 ④ ......

>>> JQuery 事件处理

 

一、事件绑定方式      

 1、事件绑定的快捷方式:

  缺点:绑定的事件,无法取消

$("button:eq(0)").dblclick(function(){

  alert(123);

});

 

 2、使用on进行事件绑定

  ① 使用on进行单事件绑定

$("button:eq(0)").on("click",function(){

  alert(123);

});

$("button:eq(0)").off("click");         //解绑 

 

  ② 使用on,同时给多个事件绑定同一函数

$("button:eq(0)").on("click dbclick mouseover",function(){

  console.log(123);

});

 

  ③ 使用on,同时给多个事件分别绑定不同的函数

$("button:eq(0)").on({

  "click":function(){

    console.log("click");

  },

  "mouseover":function(){

    console.log("mouseover");

  }

});

 

  ④ 使用on,给回调函数传参,要求是对象格式。传递的参数可以在e.data中取到

$("button:eq(0)").on("click",{"name":"zhangsan","age":14},function(e){

  console.log(e);

  console.log(e.data);

  console.log(e.data.name);

  console.log(e.data.age);

  // console.log(window.event);

});

  [事件因子]

$("button:eq(0)").on("click",function(e){

  console.log(e);

});

 

 

二、使用on事件委派      

 1、事件委派:将原来绑定在DOM节点上的事件,改为绑在其父节点甚至根节点上,然后委派给当前节点执行

$("p").on("click".function(){});

         ↓(事件委派)

$(document).on("click","p",function(){});

 

 2、事件委派的作用:

  ① 将事件直接绑定在根节点上,可以减少事件绑定次数,更加节省资源;

  ② 使用事件委派绑定的事件,当页面新增同类型标签时,新的标签也可以获得绑定的已有事件。

 

三、 使用off() 取消事件绑定   

$("button:eq(0)").on("click",function(){

  alert(1);

});

function func(){

  alert(2);

}

$("button:eq(0)").on("click",func);

$("button:eq(0)").off("click",func); // 只清除绑定了func函数的click事件

$("button:eq(0)").off("click");  // 清除所有的click事件

$("button:eq(0)").off("click dbclick");  // 同时清除多个事件

$(document).off("click","p"); // 清除事件委派

$("p").off(); // 清除绑定的所有事件

 

 

四、one() 绑定的事件只能执行一次  

$("button:eq(0)").one("click",function(){

  alert("只能执行一次");

});

 

 

五、其他事件函数      

 1、.trigger() 自动触发某个节点绑定的事件

  接受两个参数:

   ① 需要触发的事件类型;

   ② 数组格式:传递给事件回调函数的参数

  注意:

  >>> 事件回调函数的第一个参数,必须是事件对象。因此,我们传递的参数从第二个开始接受;

  >>> 传递的参数,可以使用arguments进行读取。

 2、.triggerHandler():用法与trigger相同

  【triggerHandler 和 trigger 区别】

  ① triggerHandler不能触发HTML事件,例如表单的submit事件;

   trigger可以触发所有事件!

  ② triggerHandler只能触发所有匹配元素中的第一个元素的事件;

   trigger将触发所有匹配元素的事件!

  ③ triggerHandler的返回值,是事件回调函数的返回值。如果事件回调函数没有返回值,则返回Undefined;

   trigger的返回值永远是调用事件的DOM对象。符合JQuery的可链式语法!

 3、hover():接受两个函数,分别表示mouseover() mouseout()两个事件。

  如果只写一个函数,表示mouseover

$("p:eq(0)").hover(function(){

  $(this).css("background-color","red");

},function(){

  $(this).css("background-color","blue");

});

 

 4、toggle()

  ① 不传参数,表示:当前元素如果为显示状态,则隐藏;如果为隐藏状态,则显示;

  ② 传入一个动画执行效果: "ease"   "slow"   "fast" 

$("p:eq(0)").toggle("fast");

 

 

 

  ③ 传入一个函数,表示:

   暗藏动画或显示动画,完成后执行的回调函数。

  ④ 接受一个Boolean类型的参数,表示:

   如果传入的是true则显示当前元素;如果传入的是false则隐藏当前元素。

 jQuery事件处理了解一下