不同的jQuery API来处理不同的浏览器事件

  在今天的网络浏览器处理事件是有点困难的一部分,不同的浏览器以不同的方式处理事件。因此,要克服这些跨浏览器的问题,人们可以利用jQuery的事件处理API。

  jQuery是一个小的JavaScript库,提供了广大的API来处理不同的浏览器事件和效果和更大量。阅读更多有关处理使用JavaScript浏览器的用户界面效果。在本教程中,我们将探讨不同的API jQuery来处理不同的浏览器事件。

  Page Load事件

  就绪(FN),

  这是所有类型的事件,jQuery的支持的基础上。你可能想设置形式的焦点,当页面被载入或做一些UI效果。

  

复制代码 代码如下:

  $(document).ready(function () {

  $("p").text("The DOM is now loaded and can be manipulated.");

  });

  事件处理

  绑定(类型,数据,FN),

  您可能要绑定一个处理一个或多个事件的任何元素(单击/双击等)。使用此功能结合custome任何元素的事件处理程序。

  

复制代码 代码如下:

  $("p").bind("click", function(e) {

  var str = "( " + e.pageX + ", " + e.pageY + " )";

  $("span").text("Click happened! " + str);

  });

  $("p").bind("dblclick", function() {

  $("span").text("Double-click happened in " + this.tagName);

  });

  $("p").bind("mouseenter mouseleave", function(e) {

  $(this).toggleClass("over");

  });

  触发(事件,资料)

  触发每一个匹配的元素上的事件,

  这也将导致浏览器具有相同的名称(如果存在的话)要执行的默认操作。例如,通过触发()的功能也将导致浏览器提交表单的“提交”。返回绑定到事件的职能之一虚假的默认行为是可以预防的。

  触发的事件并不局限于基于浏览器的事件,你也可以自定义事件触发绑定注册。

  

复制代码 代码如下:

  $("button:first").click(function () {

  update($("span:first"));

  });

  $("button:last").click(function () {

  $("button:first").trigger('click');

  update($("span:last"));

  });

  function update(j) {

  var n = parseInt(j.text(), 10);

  j.text(n + 1);

  }

  交互辅助活动

  在今天的Web 2.0应用程序,用户intraction处理是非常重要的。jQuery提供了一些API,可以用来处理这些相互作用。悬停(多出)此功能提供了悬停功能,即当鼠标光标移动到一个匹配的元素,第一个指定的功能被解雇。当鼠标移动的元素,第二个指定的功能火灾。此外,检查的地方看到,如果鼠标仍然是在指定的元素(例如,一个div里面的图像),如果是这样,它会继续“徘徊”,并没有迁出(一种常见的在使用mouseout事件处理程序)的错误。

  

复制代码 代码如下:

  $("li").hover(

  function () {

  $(this).append($("<span> ***</span>"));

  },

  function () {

  $(this).find("span:last").remove();

  }

  );

  辅助其他活动

  以下是功能,可用于处理不同类型的事件清单。

  模糊()

  :触发​​每一个匹配元素的blur事件。

  

复制代码 代码如下:

  $("input").blur(function () {

  $(this).next("span").css('display','inline').fadeOut(1000);

  });

  模糊(FN)

  :每一个匹配元素的blur事件中绑定一个处理函数。

  [code]

  $("input").blur(function () {

  $(this).next("span").css('display','inline').fadeOut(1000);

  });

  (FN)

  :每一个匹配元素的change事件中绑定一个功能。

  

复制代码 代码如下:

  $("select").change(function () {

  var str = "";

  $("select option:selected").each(function () {

  str += $(this).text() + " ";

  });

  $("div").text(str);

  })

  .change();

  点击(FN)

  :绑定到每一个匹配元素的click事件的功能。

  

复制代码 代码如下:

  $("p").click(function () {

  $(this).slideUp();

  });

  $("p").hover(function () {

  $(this).addClass("hilite");

  }, function () {

  $(this).removeClass("hilite");

  });

  双击(FN)

  :触发​​每一个匹配元素的DblClick事件。

  

复制代码 代码如下:

  var divdbl = $("div:first");

  divdbl.dblclick(function () {

  divdbl.toggleClass('dbl');

  });

  按键(FN)

  :每一个匹配元素的keypress事件中绑定一个功能。

  

复制代码 代码如下:

  $("input").keypress(function (e) {

  if (e.which == 32 || (65 <= e.which & e.which <= 65 + 25)

  || (97 <= e.which && e.which <= 97 + 25)) {

  var c = String.fromCharCode(e.which);

  $("p").append($("<span/>"))

  .children(":last")

  .append(document.createTextNode(c));

  } else if (e.which == 8) {

  // backspace in IE only be on keydown

  $("p").children(":last").remove();

  }

  $("div").text(e.which);

  });

  的mousedown(FN)

  :绑定到每一个匹配元素的mousedown事件的功能。

  

复制代码 代码如下:

  $("p").mouseup(function(){

  $(this).append('<span style="color:#F00;">Mouse up.</span>');

  }).mousedown(function(){

  $(this).append('<span style="color:#00F;">Mouse down.</span>');

  });

  滚动(FN)

  :每一个匹配元素的scroll事件中绑定一个处理函数。

  

复制代码 代码如下:

  $("p").clone().appendTo(document.body);

  $("p").clone().appendTo(document.body);

  $("p").clone().appendTo(document.body);

  $(window).scroll(function () {

  $("span").css("display", "inline").fadeOut("slow");

  });