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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

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