什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当 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. Netty服务器连接池管理设计思路

    应用场景: 在RPC框架中,使用Netty作为高性能的网络通信框架时,每一次服务调用,都需要与Netty服务端建立连接的话,很容易导致Netty服务器资源耗尽.所以,想到连接池技术,将与同一个Nett ...

  2. DateUtil 提供一些常用的时间想法的方法

    package com.opslab.util; import java.text.ParseException;import java.text.SimpleDateFormat;import ja ...

  3. CGI = MCC + MNC + LAC + CI

    CGI = MCC + MNC + LAC + CI 摘自:http://www.360doc.com/content/19/0801/10/65611272_852334484.shtml CGI是 ...

  4. windows10 环境下的amqp安装步骤（图文）

    安装PHP扩展ampq 查看phpinfo()信息 下载ampq扩展 下载地址:http://pecl.php.net/package/amqp 选择一个dll版本下载,本文选择的是1.9.3 自己根 ...

  5. [ kvm ] 学习笔记 9：WebVirtMgr 基础及安装使用

    目录- 1. 前言- 2. webvirtmgr 简介- 3. webvirtmgr 部署实践    - 3.1 配置 webvirtmgr 主机    - 3.2 kvm node节点配置    - ...

  6. UITableView实现行纵向颜色渐变

    实现效果如下: 其实实现很简单,开始觉得使用颜色值和tableView的indexPath.row挂钩使用即可 或者使用CAGradientLayer实现渐变 最后使用alpha实现即可.需要注意的是 ...

  7. 【 argo 和 kubectl 】

    argo submit --watch xxx.yaml [ --kubeconfig xxx.conf  --namespace xxx ] argo list [ --kubeconfig xxx ...

  8. 【Leetcode_easy】953. Verifying an Alien Dictionary

    problem 953. Verifying an Alien Dictionary solution: class Solution { public: bool isAlienSorted(vec ...

  9. 系统调用system call以及strace/dtruss

    计算机系统的各种硬件资源是有限的,在现代多任务操作系统上同时运行的多个进程都需要访问这些资源,进程是不允许直接操作这些资源的,所有对这些资源的访问都必须有操作系统控制.也就是说操作系统是使用这些资源的 ...

  10. git 版本控制中回溯到某个历史版本

    1.git log 查看之前的版本号 2. git reset --hard 版本号 3.git push -f -u origin 分支 恢复上一个版本是: git reset --hard HEA ...