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

　　常用的时间主要有以下几种：

　　click()事件：click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行;

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>click()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

       <script>

         $(document).ready(function(){

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

             $(this).hide();

           });

         });

        </script>

  </head>

 <body>

     <p>如果你点我，我就会消失。</p>

     <p>点我消失!</p>

     <p>点我也消失!</p>

 </body>

 </html>

　　dblclick()事件：当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数;

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>dblclick()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

 </script>

 <script>

         $(document).ready(function(){

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

             $(this).hide();

           });

         });

 </script>

 </head>

 <body>

         <p>双击鼠标左键的，我就消失。</p>

         <p>双击我消失！</p>

         <p>双击我也消失！</p>

 </body>

 </html>

　　mouseenter()事件：当鼠标指针穿过元素时，会发生的事件。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>mouseenter()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

  <script>

         $(document).ready(function(){

           $("#p1").mouseenter(function(){

             alert('您的鼠标移到了 id="p1" 的元素上!');

           });

         });

  </script>

 </head>

 <body>

    <p id="p1">鼠标指针进入此处，会看到弹窗。</p>

 </body>

 </html>

　　mouseleave()事件：当鼠标指针离开元素时，会发生 的事件。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>mouseleave()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

     <script>

         $(document).ready(function(){

           $("#p1").mouseleave(function(){

             alert("再见，您的鼠标离开了该段落。");

           });

         });

     </script>

 </head>

 <body>

 <p id="p1">这是一个段落。</p>

 </body>

 </html>

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

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>mousedown()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

     <script>

         $(document).ready(function(){

           $("#p1").mousedown(function(){

             alert("鼠标在该段落上按下！");

           });

         });

     </script>

 </head>

 <body>

 <p id="p1">这是一个段落</p>

 </body>

 </html>

　　mouseup()事件：当在元素上松开鼠标按钮时，会发生的事件。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>mouseup()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

     <script>

         $(document).ready(function(){

           $("#p1").mouseup(function(){

             alert("鼠标在段落上松开。");

           });

         });

     </script>

 </head>

 <body>

 <p id="p1">这是一个段落。</p>

 </body>

 </html>

　　hover()事件：用于模拟光标悬停事件。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8"><title>hover()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

 </script>

     <script>

         $(document).ready(function(){

             $("#p1").hover(

                 function(){

                     alert("你进入了 p1!");

                 },

                 function(){

                     alert("拜拜! 现在你离开了 p1!");

                 }

             )

         });

     </script>

 </head>

 <body>

 <p id="p1">这是一个段落。</p>

 </body>

 </html>

　　focus()事件：当元素获得焦点时，发生的事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>focus()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

     <script>

         $(document).ready(function(){

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

             $(this).css("background-color","#cccccc");

           });

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

             $(this).css("background-color","#ffffff");

           });

         });

     </script>

 </head>

 <body>

 Name: <input type="text" name="fullname"><br>

 Email: <input type="text" name="email">

 </body>

 </html>

　　blur()事件：当元素失去焦点时，发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>blur()事件</title>

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

     <script>

         $(document).ready(function(){

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

             $(this).css("background-color","#cccccc");

           });

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

             $(this).css("background-color","#ffffff");

           });

         });

     </script>

 </head>

 <body>

 Name: <input type="text" name="fullname"><br>

 Email: <input type="text" name="email">

 </body>

 </html>

　　事件处理程序指的是当 HTML 中发生某些事件时所调用的方法，是 jQuery 中的核心函数。

jQuery 事件介绍的更多相关文章

  1. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  2. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  3. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  4. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  5. jQuery事件与事件对象

    事件是脚本编程的灵魂,本篇来介绍jQuery中的事件处理及事件对象. 事件与事件对象 首先,我们来看一下经常使用的添加事件的方式: <input type="button" ...

  6. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  7. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  8. jQuery的介绍和选择器详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时, ...

  9. 彻底弄懂jQuery事件原理二

    上一篇说到,我们在最外层API的on,off,tiggler,triggerHandler调用的是event方法的add,remove和tirgger方法,本篇就来介绍event辅助类 \ 先放个图, ...

随机推荐

  1. [原][C++]拒绝智能指针与指针混用，常见智能指针问题

    公司一个非专科的程序在开发过程中有些毛躁,但是又想使用些新学的技术 这天他正调试呢,发现有一个BUG怎么也找不到原因. 用的好好的内存怎么就突然被删除了呢,好好的指针,怎么就访问越界了呢 没办法,他只 ...

  2. Dart中排除空的情况：

    但是dart的string类型还有另一个方法isNotEmpty,此时这样写: if (str?.isNotEmpty()) { // str is not empty, do something } ...

  3. python学习：几种采用的功能实现示例

    1.python 程序退出的几种方式 import sys sys.exit() sys.exit(0) sys.exit(1) 或者 os._exit() 该方法中包含一个参数status,默认为0 ...

  4. laravel5.1框架model类查询实现

    laravel框架model类查询实现: User::where(['uid'=8])->get(); User类继承自Model类:Illuminate\Database\Eloquent\M ...

  5. Windows2008R2+iis7.5环境下的dz论坛X3版伪静态设置教程

    Windows2008R2+iis7.5环境下的dz论坛X3版伪静态设置教程 因为2008R2不是那么的普及,加上X3版新出不久,所以伪静态的设置教程比较少,今天搞出来了,其实很简单,那么下面给大家简 ...

  6. ASP.NET(C#)图片加文字、图片水印，神啊，看看吧

    ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...

  7. 10点睛Spring MVC4.1-全局异常处理

    10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.w ...

  8. 批处理&提权命令

    提权应用 批处理遍历webshell可访问目录 opendir.readdir.is_dir.is_writable这几个遍历文件夹的函数,在php限制的情况下,找可执行目录就没有优势了. @echo ...

  9. elk问题汇总

    解决方案: https://blog.51cto.com/michaelkang/2298689?source=dra 使用postman.  PUT请求, JSON格式

  10. 【GStreamer开发】GStreamer基础教程12——流

    目标 直接播放Internet上的文件而不在本地保存就被称为流播放.我们在前面教程里已经这样做过了,使用了http://的URL.本教程展示的是在播放流的时候需要记住的几个点,特别是: 如何设置缓冲 ...