Jquery 事件

bind()向元素添加事件处理程序

$("p").bind("click",function(){
    alert("这个段落被点击了。");
});

blur()添加、触发失去焦点事件

$("input").blur(function(){
    alert("输入框失去了焦点");
});

change()添加、触发事件

$("input").change(function(){
    alert("文本已被修改");
});

click()点击事件

$("p").click(function(){
    alert("段落被点击了。");
});

dblclick()添加、触发double click事件

$("p").dblclick(function(){
    alert("这个段落被双击。");
});

delegate()向匹配元素的当前或未来的元素添加处理程序

$("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
});

event.currentTarget在事件冒泡阶段内的当前Dom元素

$("h1,h2,p").click(function(event){
   alert(event.currentTarget === this);
});

event.data()包含当前执行的处理程序被绑定时传递到事件方法的可选数据

$("p").each(function(i){
    $(this).on("click",{x:i},function(event){
        alert("序号：" + $(this).index() + ". 段落的数据为: " + event.data.x);
    });
});

event.delegateTarget返回当前调用的 jQuery 事件处理程序所添加的元素

$("div").on("click","button",function(event){
    $(event.delegateTarget).css("background-color", "pink");
});

event.isDefaultPrevented返回指定的 event 对象上是否调用了 event.preventDefault()

$("a").click(function(event){
    event.preventDefault();
    alert("检查 preventDefault() 是否被调用: " + event.isDefaultPrevented());
});

event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()

$("div").click(function(event){
    event.stopImmediatePropagation();
    alert(event.isImmediatePropagationStopped());
});

event.stopPropagation()返回指定的 event 对象上是否调用了 event.stopPropagation()

$("div").click(function(event){
    event.stopPropagation();
    alert(event.isPropagationStopped());
});

event.namespace返回事件被触发时指定的命名空间

$("p").on("custom.someNamespace",function(event){
    alert(event.namespace);
});
$("p").click(function(event){
    $(this).trigger("custom.someNamespace");
}); 
$("button").click(function(){
    $("p").off("custom.someNamespace");
});

event.pageX返回相对于文档左边缘的鼠标位置

$(document).mousemove(function(event){ 
    $("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
});

event.pageX返回相对于文档上边缘的鼠标位置

$(document).mousemove(function(event){ 
    $("span").text("X: " + event.pageX + ", Y: " + event.pageY); 
});

event.preventDefault()阻止事件的默认行为

$("a").click(function(event){
    event.preventDefault();
});

event.relatedTarget返回当鼠标移动时哪个元素进入或退出

$("div").mouseenter(function(event){
    alert("relatedTarget 为: " + event.relatedTarget);
});

event.result包含由被指定事件触发的事件处理程序返回的最后一个值]

$("button").click(function(){
    return "Hello world!";
});
$("button").click(function(event){
    $("p").html(event.result);
});

event.stopImmediatePropagation()阻止其他事件处理程序被调用

$("div").click(function(event){
    alert("事件句柄 1 被执行");
    event.stopImmediatePropagation();
});
$("div").click(function(event){
    alert("事件句柄 2 被执行");
});
$("div").click(function(event){
    alert("事件句柄 3 被执行");
});

event.stopPropagation()阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知

$("span").click(function(event){
event.stopPropagation();
alert("The span element was clicked.");
});
$("p").click(function(event){
alert("The p element was clicked.");
});
$("div").click(function(){
alert("The div element was clicked.");
});

event.target返回哪个 DOM 元素触发事件

$("p, button, h1").click(function(event){
    $("div").html("通过 " + event.target.nodeName + " 元素触发。");
});

event.timeStamp返回从 1970 年 1 月 1 日到事件被触发时的毫秒数

$("button").click(function(event){
    $("span").text(event.timeStamp);
});

event.type返回哪种事件类型被触发

$("p").on("click dblclick mouseover mouseout",function(event){
$("div").html("Event: " + event.type);
});

event.which返回指定事件上哪个键盘键或鼠标按钮被按下

$("input").keydown(function(event){ 
    $("div").html("Key: " + event.which);
});

·event.metaKey`事件触发时 META 键是否被按下

$( "#checkMetaKey" ).click(function( event ) {
    $( "#display" ).text( event.metaKey );
});

focus()添加触发focus事件

$("input").focus(function(){
    $("span").css("display","inline").fadeOut(2000);
});

focusin()添加事件处理程序到 focusin 事件

$("div").focusin(function(){
$(this).css("background-color","#FFFFCC");
});

focusout()添加事件处理程序到 focusout 事件

$("div").focusout(function(){
    $(this).css("background-color","#FFFFFF");
});

hover()添加两个事件处理程序到 hover 事件

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

keydown()添加/触发 keydown 事件

$("input").keydown(function(){
    $("input").css("background-color","yellow");
});

keypress()添加/触发 keypress 事件

$("input").keypress(function(){
    $("span").text(i+=1);
});

keyup()添加触发keyup事件

$("input").keyup(function(){
    $("input").css("background-color","pink");
});

mouseenter()添加/触发 mouseenter 事件

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

mouseleave()添加/触发 mouseleave 事件

$("p").mouseleave(function(){
    $("p").css("background-color","gray");
});

mousemove()添加/触发 mousemove 事件

$(document).mousemove(function(event){
$("span").text(event.pageX + ", " + event.pageY);
});

mouseout()添加/触发 mouseout 事件

$("p").mouseout(function(){
$("p").css("background-color","gray");
});

mouseover()添加/触发 mouseover 事件

$(document).mousemove(function(event){
$("span").text(event.pageX + ", " + event.pageY);
});

mouseup()添加/触发 mouseup 事件

$("div").mouseup(function(){
    $(this).after("释放鼠标按钮。");
});

off()移除通过 on() 方法添加的事件处理程序

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

on()向元素添加事件处理程序

$(document).ready(function(){
  $("p").on("click",function(){
    alert("段落被点击了。");
  });
});

one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

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

$.proxy()接受一个已有的函数，并返回一个带特定上下文的新的函数

$("button").click($.proxy(objPerson,"test"));

ready()规定当 DOM 完全加载时要执行的函数

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
    });
});

resize()添加/触发 resize 事件

$(window).resize(function(){
    $('span').text(x+=1);
});

scroll()添加/触发 scroll 事件

$("div").scroll(function(){
    $("span").text(x+=1);
});

select()添加触发select事件

$("input").select(function(){
    alert("文本已选中!");
});

submit()添加/触发 submit 事件

$("form").submit(function(){
    alert("提交");
});

tigger()触发绑定到被选元素的所有事件

$("button").click(function(){
    $("input").trigger("select");
});

triggerHandler()触发绑定到被选元素的指定事件上的所有函数

$("button").click(function(){
    $("input").triggerHandler("select");
});

unbind()从被选元素上移除添加的事件处理程序

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

undelegate()从现在或未来的被选元素上移除事件处理程序

$("body").undelegate();

contextmenu()添加事件处理程序到 contextmenu 事件

<div id="target">
    右键单击这里
</div>
<script>
$(function () { 
    $( "#target" ).contextmenu(function() {
        alert( "处理程序.contextmenu()被调用。" );
    });
})
</script>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容

  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,470评论 1赞 11
  • jQuery事件篇
    本篇博客源地址 总结： 鼠标事件 1.click与dbclick事件ele.click()ele.click(ha...
    ZombieBrandg阅读 665评论 0赞 1
  • jQuery事件篇
    总结： 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,593评论 2赞 10
  • 02-老马jQuery教程-jQuery事件处理
    本文章是老马jQuery视频的讲义和上课的代码。具体观看视频地址：https://chuanke.baidu.co...
    IT老马阅读 2,562评论 3赞 14
  • jQuery——事件
    JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。 jQuery增加并扩...
    DHFE阅读 598评论 0赞 1