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

    https://otp.landian.vip/zh-cn/index.html 本软件支持Microsoft Office办公软件最新版本高速下载.卸载.修复.定制化安装.静默安装等诸多功能. 同时 ...

  2. flutter PopupMenuButton弹出式菜单列表

    import 'package:flutter/material.dart'; class PopupMenuButtonDemo extends StatefulWidget { @override ...

  3. ES6深入浅出-10 ES6新增的数据类型-1.Symbol与隐藏属性

    ES5现有的数据类型.7种数据类型. 新的类型是属于Object 最普通的类型.plain object 数组array 函数function 下面这些都属于Object类型. 今天要讲的 set类型 ...

  4. 软件定义网络基础---SDN数据平面

    主要介绍SDN架构和转发模型 一:传统网络设备 (一)传统设备控制平面和数据平面 (二)数据平面的任务 数据平面对数据包的处理,主要通过查询由控制平面所生成的转发信息表来完成 (三)传统网络数据平面数 ...

  5. python读写csv文件的方法(还没试，先记录一下)

    该csv模块定义了以下功能: csv.reader(csvfile,dialect ='excel',** fmtparams ) 返回一个reader对象,它将迭代给定csvfile中的行. csv ...

  6. Redis应用场景梳理

    缓存 作为Key-Value形态的内存数据库,Redis 最先会被想到的应用场景便是作为数据缓存.而使用 Redis 缓存数据非常简单,只需要通过string类型将序列化后的对象存起来即可,不过也有一 ...

  7. Swift4.0复习扩展

    1.扩展计算式属性: 2.对方法进行扩展: /// 定义枚举类型Light, /// 它指定了基本类型String enum Light: String { case red = "red& ...

  8. jenkins安装插件一直不动

    刷新界面即可,查看已安装的插件即可,这个时候已经安装完了,不用重启,直接使用插件即可

  9. Python3 IO编程之StringIO和BytesIO

    StringIO 很多时候,数据读写不一定是文件,也可以在内存中读写. 要把str写入StringIO,我们需要先创建一个StringIO,然后像文件一样写入即可 >>> from ...

  10. 时空卷积网络TCN

    1.写在前面 实验表明,RNN 在几乎所有的序列问题上都有良好表现,包括语音/文本识别.机器翻译.手写体识别.序列数据分析(预测)等. 在实际应用中,RNN 在内部设计上存在一个严重的问题:由于网络一 ...