什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当 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. Python3基础 函数 参数为list 使用+=会影响到外部的实参

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  2. 一台服务器部署多台tomcat

    如题,多个项目部署在一台服务器.减少容错性,觉得分开部署,这样一个tomcat挂了不会影响另一个项目.看配置和应用大小决定数量,一般四五个没问题,也有单台服务器部署8个tomcat稳定运行的. 下面记 ...

  3. ES6深入浅出-5 新版对象-2.属性修饰符

    对象语法增强 已经有了个对象的新增语法 还需要一个api来做呢?. 因为有的时候,你需要在旧的对象上添加get.set. 读的时候就走get 写的时候就走set 假设很早之前在项目里写了一个old对象 ...

  4. 常用OID(SNMP)

    系统参数(1.3.6.1.2.1.1) OID 描述 备注 请求方式 .1.3.6.1.2.1.1.1.0 获取系统基本信息 SysDesc GET .1.3.6.1.2.1.1.3.0 监控时间 s ...

  5. 关于IO的操作（文件、网络）

    IO操作的流程总结和分析: (1)对象,易于编写代码    --->   (2)byte[],底层本质   ---->  (3)IO(文件.网络),最终IO处理掉

  6. 【k8s 硬盘监控】prometheus grafana

    设置监控哪块盘: https://www.bountysource.com/issues/50160777-disk-space-usage-depcited-in-grafana-correct h ...

  7. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  8. 【Tools】三款笔记本电脑硬件检测工具-官网下载

    一.CPU-Z 下载地址: https://www.cpuid.com/softwares/cpu-z.html 描述: CPU-Z已经是大名鼎鼎了.这里就不多说了.  二.Cinebench   下 ...

  9. css 修改placeholder样式

    input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ co ...

  10. 小程序开发框架----WXSS

    规定了屏幕宽度为750个RPX,从而可以通过屏幕宽度来进行自适应