javascript 事件1 - 处理鼠标事件和键盘事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 事件1 - 处理鼠标事件和键盘事件相关的知识,希望对你有一定的参考价值。

$(function () {

  // Click handler can be attached by passing a callback function to the click()
  // function. Whatever code you write into the callback function is then
  // executed whenever the user clicks the element.
  // You can add a parameter to the callback to retrieve additional info about
  // the event. Accordingly, we call the parameter "event".
  $("#btn-click").click(function(event) {
    console.log(event);
    alert("Thanks for clicking me!");
  });

  // As always in jQuery, inside the callback, you can refer to the element
  // as $(this).
  $(".red-box").click(function() {
    var currentOpacity = $(this).css("opacity");
    $(this).fadeTo(500, currentOpacity - 0.2);
  });

  // You can even simulate click events on the element by calling click()
  // without any arguments.
  $(".red-box").click();

});
$(function () {

  // Hover handlers are defined the same way as click handlers but using hover().
  // Hover events fire as soon as the cursor enters *or* leaves the element.
  $("#button").hover(function(event) {
    console.log(event);
    alert("You hovered me!");
  })

  // And you can again refer to the element as $(this) from within the callback.
  $(".green-box").hover(function() {
    $(this).text("Hovered!");
  });

});
$(function () {

  // While hover() with one callback function triggers both when entering and
  // leaving the element with the cursor, mouseenter() and mouseleave() allow
  // you to attach different event handlers for both.
  $(".blue-box").mouseenter(function() {
    $(this).stop().fadeTo(500, 0.5);
  });

  $(".blue-box").mouseleave(function() {
    $(this).stop().fadeTo(500, 1);
  });

  // However, you can achieve the same with hover() as well. For this, you must
  // pass in two callback functions: first the one for mouseenter, then the one
  // for mouseleave.
  // So the following does the same as  the above, but for the red box:
  $(".red-box").hover(function() {
    $(this).stop().fadeTo(500, 0.5);
  }, function() {
    $(this).stop().fadeTo(500, 1);
  });

});
$(function () {

  // You can attach the same handler (callback function) for multiple events
  // using jQuery's on() function.
  // For instance, the following logs to the console whenever you click anywhere
  // on the page or press any key while the page/browser is focused.
  $("html").on("click keydown", function() {
    console.log("Mouse was clicked or key was pressed.");
  });

  // Let's use this to add a gallery that switches to the next image on click.
  var images = [
    "images/laptop-mobile_small.jpg",
    "images/laptop-on-table_small.jpg",
    "images/people-office-group-team_small.jpg"
  ];

  // The following is the same as in the image slideshow code, except we now
  // use a click event instead of setTimeout().
  var i = 0;
  $(".gallery").find("img").on("click", function() {
    i = (i + 1) % images.length;
    $(this).fadeOut(function() {
      $(this).attr("src", images[i]).fadeIn();
    });
  });

});
$(function () {

  // You can modularize your code into smaller functions by defining the
  // callback function explicitly instead of passing it in.

  // Directly passing in callback as before. We call this callback an *anonymous
  // function* because it doesn't have a name.
  $("html").on("click keydown", function() {
    console.log("Mouse was clicked or key was pressed.");
  });

  // Using named function as a callback (this function is defined at the end of
  // this file).
  $("html").on("click keydown", logEvent);

  // Let's use this to add a gallery that switches to the next image on click.
  var images = [
    "images/laptop-mobile_small.jpg",
    "images/laptop-on-table_small.jpg",
    "images/people-office-group-team_small.jpg"
  ];

  // For this function, it makes more sense to modularize it because the
  // callback is more complex.
  // To do this, we store the gallery image in a variable so that we can use it
  // in the switchToNextImage() function instead of $(this). Using $(this)
  // would still work but would make the function harder to read and understand.
  var i = 0;
  var galleryImage = $(".gallery").find("img")
  galleryImage.on("click", switchToNextImage);

  // In contrast to logEvent(), this is a nested function (it's nested into our
  // main jQuery function). This way, we can access galleryImage.
  function switchToNextImage() {
    i = (i + 1) % images.length;
    galleryImage.fadeOut(function() {
      galleryImage.attr("src", images[i]).fadeIn();
    });
  }

});

// Normal, named function
function logEvent() {
  console.log("Mouse was clicked or key was pressed.");
}
$(function () {

  // The event handlers you've used so far are only attached to those elements
  // that exist at the time the code is executed. Thus, they won't work for
  // dynamically attached elements:
  $("p").click(function() {
    $(this).slideUp();
  });
  $("#list").before("<p>This is a dynamically added paragraph</p>");

  // To solve this, you can use delegated events. Here, you attach the handler
  // to a parent element that will always exist on the page. When the event
  // comes in, the parent then delegates the event to all defined children.
  // For this, you must use the on() function, and pass in which children should
  // handle the event. For instance, all <li> tags inside #content:
  $("#content").on("click", "li li", function() {
    $(this).slideUp();
  });

  $("#list ul").append("<li>Dynamically added new item!</li>");

});
$(function () {

  // For all the event handlers you've learned, you can pass in an additional
  // first argument to attach extra data to the event object. This extra data
  // is passed as a JavaScript object, which is encompassed by curly braces:
  $("#button").click({
    user: "Peter",
    domain: "http://petersommerhoff.com"
  }, function(event) {
    console.log(event.data);  // event.data carries the extra data: user and domain

    // Here, we call our function greetUser() and pass in the event data as
    // its argument.
    greetUser(event.data);
  });

  // The function greetUser() accepts one parameter with user data (this will
  // be event.data) so that we can access it inside the function.
  function greetUser(userdata) {
    // Uses the user from the event data, or "Anonymous" if none is defined.
    username = userdata.user || "Anonymous";
    domain = userdata.domain || "example.com";

    alert("Welcome back " + username + " from " + domain + "!");
  }

});
$(function () {

  // These are now multiple images.
  var galleryItems = $(".gallery").find("img");

  // Normally, you would do this in CSS.
  galleryItems.css("width", "30%")
              .css("opacity", "0.7");

  // Fade images in/out when hovering/leaving.
  galleryItems.mouseenter(function() {
    $(this).stop().fadeTo(500, 1);
  });

  galleryItems.mouseleave(function() {
    $(this).stop().fadeTo(500, 0.7);
  });

  // Preview image in lightbox when clicked.
  galleryItems.click(function() {
    // Read image src of clicked image.
    var source = $(this).attr("src");

    // Generate new <img> tag to add to the lightbox.
    var newImage = $("<img>").attr("src", source).css("width", "100%");

    // Prepare and show lightbox preview.
    $(".lightbox").empty().append(newImage).fadeIn(1000);
  });

  // Exit lightbox preview when clicking it anywhere.
  $(".lightbox").click(function() {
    $(this).stop().fadeOut();
  });

});
$(function () {

  // To handle key presses, use keydown().
  // Usually, you'll attach this to the <html> tag so that the event is handled
  // whenever a key is pressed on the page.
  $("html").keydown(function(event) {
    // You normally want to use the event argument here to do something based
    // on which key was pressed. This information is stored in event.which.
    console.log(event.which);
  });

  // Looking at the log of event.which, we can see that the arrow right key
  // corresponds to 39. So let's store this info to make the code readable:
  var ARROW_RIGHT = 39;

  // Now let's move the blue box when the user presses the arrow right key.
  $("html").keydown(function(event) {
    if (event.which === ARROW_RIGHT) {
      $(".blue-box").stop().animate({
        marginLeft: "+=10px"
      }, 50);
    }
  });

});

以上是关于javascript 事件1 - 处理鼠标事件和键盘事件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础教程—处理事件

JavaScript事件对象

JavaScript事件

javascript学习笔记整理(事件)

JavaScript键盘鼠标事件处理

javascript父级鼠标移入移出事件中的子集影响父级的处理方法