jQuery事件的具体使用是怎样，种类包括哪些-群英

jQuery事件的具体使用是怎样，种类包括哪��

Admin 2022-12-02 群英技术资��

这篇主要是介绍“jQuery事件的具体使用是怎样，种类包括哪些”的内容了，下文有实例供大家参考，对大家了��操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家解决jQuery事件的具体使用是怎样，种类包括哪些的问题，下面我们一起来了解看看吧��

事件响应和触发器是jQuery编程中非常重要的技术，而我们程序员也需要掌握和运用jQuery的各种常见事件操作技巧，这在我们的编程有很重要的作用��

具体用法如下��

1.通过方法名给元素绑定事件��

$('li').click(function(event){})

2.通过bind方法给元素绑定事件：

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){})

可见，通过bind，可以给元素绑定多个事件��

3.事件的命名空��

为什么需要事件命名空间？

→假设，先给li元素绑定2个click事件��

$('li')
 .bind('click',function(event){})
 .bind('click',function(event){})

→现在我们要把其中一个click事件注销掉，可能这样写：

$('li').unbind('click')

但这样，我们li所有的click事件都注销了，这不是我们想要的。使用事件命名空间可解决这一问题，之所以需要事件命名空间，是因为它为我们在注销事件的时候提供了方便��

如何使用事件命名空间��
→在为元素绑定事件的时候，在事件名称后加上命名空间，符合格式：事件名称.命名空间名称��

$('li')
 .bind('click.editMode',function(event){})
 .bind('click.displayMode',function(event){})

→在注销事件的时候，可以这样写：

$('li').unbind('click.editMode')

4.事件的种��

blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
moseover
mouseup
ready
resize
scroll
select
submit
unload

5.one方法

用于创建一次性事件，一旦这个事件执行了一次后，就会被自动删除��

$("p").one("click",function(){
 $(this).animate({fontSize: "+=6px"});
})

6.删除事件

//先给元素添加事件
$("p").click(function(){
 $(this).slideToggle();
})
//再把元素的事件删��
$("button").click(function(){
 $("p").unbind();
})

7.Event属��

实际上，它是jquery的全局属性，jQuery.Event。每当触发事件，Event对象实例就会被传递给Event Handler��

可以通过Event的构造函数来创建事件，并触发事件��

var e = jQueery.Event("click")
jQuery("body").trigger(e);

甚至可以通过构造函数，把一个匿名对象放在Event中传递��

var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);

使用的时候，通过event.data.KeyCode来获取匿名对象的值��

可以通过jQuery.Event的构造函数把匿名对象放在Event中传递，不仅如此，通过事件也可以传递匿名对象��

$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
 alert(event.data.param1);
 alert(event.data.param2);
}

可见，通过event.data可以获取匿名对象的键��

通过Event对象实例，还可以拿到其它方面的信息，比如��

$("p").click(function(event){
 alert(event.target.nodeName);
})

以上，通过event.target.nodeName获取触发事件的元素名称��

jQuery.Event的其它属性包括：

altKey 如果alt键按下就为true，在Mac键盘中alt键标记为Option
ctrKey ctrl键被按下
shiftKey Shift键被按下
currentTarget 冒泡阶段的当前元��
data
metaKey 一般Meta键是Ctrl，而Mac上是Command��
pageX 鼠标事件时光标相对于页面原点的水平坐��
pageY 鼠标事件时光标相对于页面原点的垂直坐��
relatedTarget 触发鼠标事件时光标离开或进入的元素
screenX 鼠标事件时光标相对于屏幕原点的水平坐��
screenY 鼠标事件时光标相对于屏幕原点的垂直坐��
result 从前面的事件处理器返回最近非undefined的��
target 触发事件的元��
timestamp jQuery.Event创建实例时的时间戳，以毫秒为单位
type 事件类型，比如click
which 如果是键盘事件，代表按键的数字，如果是鼠标事件，记录按下的是左键、中键或右键

8.Event方法

event.preventDefault()阻止默认行为
event.stopPropgation()停止"冒泡"，即停止沿着DOM向上进一步传��
event.stopImmediatePropagation()停止所有事件的进一步传��
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()

9.live方法和on方法

该方法允许我们为还不存在的元素创建事件。与bind方法不同的是：能为所有匹配的元素绑定事件，设置是那些暂时还不存在、需要动态创建的元素。而且，live方法不一定要放在$(function(){})就绪处理器中。到�� jQuery 1.7以后，就改为on方法了��

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

如果想取消注册事件：

$("button").click(function(){
 $("p").off("click");
})

10.trigger方法

当我们想手动触发元素绑定的事件时可以使用trigger方法��

$("#foo").on("click",function(){
 alert($(this).text());
})
$("#foo").trigger("click");

还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参��

$("#foo").on("custom", function(event, param1, param2){
 alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);

trigger触发由jQuery.Event创建的实例：

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

甚至可以在trigger触发方法的时候传入匿名对象：

$("body").trigger({
 type: "logged",
 user: "foo",
 pass: "bar"
});

如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false��

11.triggerHandler方法

triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不��"冒泡"��

//给一个元素绑定一个focus事件
$("input").focus(function(){
 $("Focused").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
 $("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
 $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})

12.事件冒泡和事件委��

什么是事件冒泡��

有这么一段代码��

I am a Link!

I am another Link!

现在，给该页面所有的元素绑定click事件，包括window和document��

  $(function () {
   $('*').add([document, window]).on('click', function(event) {
    event.preventDefault();
    console.log(this);
   });
  });

当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window��

如何阻止事件冒泡��

显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件��

  $(function () {
   $('a').on('click', function(event) {
    event.preventDefault();
    console.log($(this).attr('href'));
   });
  });

以上，只为a绑定了click事件，无它��

如何有效利用事件冒泡��

在jquery中，事件委托却很好地利用了事件冒泡��

Item #1
Item #2
Item #3
Item #4

现在，我们想给现有li中的a标签绑定事件，这样写��

$( "#list a" ).on( "click", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

但是，如果又在现有的ul中添加新的li和a，那情况又如何呢��

$( "#list" ).append( "

Item #5
" );

结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？

如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为��

$( "#list" ).on( "click", "a", function( event ) {
 event.preventDefault();
 console.log( $( this ).text() );
});

以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a

事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的��

13.toggle方法

允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件��

$('img[src*=small]').toggle({
 function(){},
 function(){},
 function(){}
});

14.mouseenter和mouseleave方法

$(element).mouseenter(function(){}).mouseleave(function(){})

15.hover方法

$("p").hover(function(){
 $("p").css("background-color","yellow");
 },function(){
 $("p").css("background-color","pink");
});

关于“jQuery事件的具体使用是怎样，种类包括哪些”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦��如果想了解更多相关内容的文章，关注我们，群英网络小编每天都会为大家更新不同的知识��

标签�� jQuery事件使用

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容��

下一篇：JS数组与字符串转换的实现代码是什��
上一篇：jQuery跨域访问的解决方法及要点是什��