什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当 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. 生成model笔记

    https://github.com/yscacaca/DeepSense/tree/master/android_test这个才是真正的部署代码,跑这个代码就好. 跑python sample_mo ...

  2. Docs-.NET-C#-指南-语言参考-关键字-内置类型-值类型：值类型的功能

    ylbtech-Docs-.NET-C#-指南-语言参考-关键字-内置类型-值类型:值类型的功能 1.返回顶部 1. 值类型(C# 参考) 2018/11/26 有两种值类型: 结构 枚举 值类型的主 ...

  3. python接入微博第三方API之1环境准备

    环境准备: 1.注册微博账号 2.注册应用

  4. Python3基础 def 函数要先定义再调用

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

  5. 谷歌Chrome浏览器 截取网页长图方法

    Chrome浏览器: 1.按F12打开调试页面 2.按下ctrl + shift + p 3.输入命令 Capture full size screenshot 并回车 4.浏览器会自动截取整个网页内 ...

  6. 利用 Postman 中 Tests 断言校验返回结果

    前言 Postman目前是一款很火的接口测试工具,它有着非常强大结果判断能力.为什么说强大呢,因为Postman有自带的校验脚本,根本不需要我们去学习JS脚本语言,对于代码能力为0的各位测试小伙伴来说 ...

  7. 123457123456#1#----com.ppGame.BaoBaoiMiYu35--前拼后广--miyu_pp

    com.ppGame.BaoBaoiMiYu35--前拼后广--miyu_pp

  8. js文档系统-jsdoc-docdash

    一.参考文档 模版:https://github.com/clenemt/docdash 例子:http://clenemt.github.io/docdash/index.html jsdoc:ht ...

  9. ELK之es常用查询语句

    参考:https://www.cnblogs.com/kyleinjava/p/10497042.html           https://blog.csdn.net/luanpeng825485 ...

  10. CentOS6安装MySQL开启远程登录

    Centos6安装MySQL 检测下系统有没有自带的mysql:yum list installed | grep mysql 如果已经有的话执行命令 yum -y remove mysql-libs ...