前端

jQuery 事件

菠萝猫 · 10月4日 · 2019年 510次已读

什么是事件?

页面对不同访问者的响应叫做事件
事件处理程序指的是当发生事件时所调用的方法。

常用的事件方法

$(function(){});

允许我们在文档完全加载完后执行函数.

$(function(){
  // 开始写 jQuery 代码...
});

click()

当单击某一元素时触发。

$(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

dblclick()

当双击某一元素时触发。

$(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});

mouseenter()

当鼠标指针穿过元素时,会发生 mouseenter 事件。

$(function(){
  $("#p1").mouseenter(function(){
    alert("您的鼠标移到了 id=p1 的元素上!");
  });
});

mouseleave()

当鼠标指针离开元素时,会发生 mouseleave 事件。

$(function(){
  $("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});
});

mousedown()

当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

$(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下!");
  });
});

mouseup()

当在元素上松开鼠标按钮时,会发生 mouseup 事件。

$(function(){
  $("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});
});

hover()

用于模拟光标悬停事件。

$(function(){
$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});
});

focus()

当元素获得焦点时,发生 focus 事件

$(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});

blur()

当元素失去焦点时,发生 blur 事件。

$(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});

版权声明:本站采用 “知识共享署名 – 非商业性使用 – 相同方式共享 4.0 中国大陆许可协议” 进行许可,您可以转载本站文章,转载时请以超链接形式标明文章原始出处,Thanks.
0 条回应