jQuery 事件

什么是事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见 DOM 事件:

鼠标事件

键盘事件

表单事件

文档/窗口事件

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

blur

unload

事件绑定

文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用on()方法来对被选元素及子元素上添加一个或多个事件处理程序。

注意:自 jQuery 版本 1.7 起,on() 方法是 bind()live()delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

提示:如需移除事件处理程序,请使用Off()方法。

提示:如需添加只运行一次的事件然后移除,请使用one()方法。

语法

$(selector).on(event,childSelector,data,function,map)

参数

描述

event

必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。

childSelector

可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。

data

可选。规定传递到函数的额外数据。

function

可选。规定当事件发生时运行的函数。

map

规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

范例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>test</title>
 <style type="text/css">
 *{margin:0;padding:0;}    
 body { font-size: 13px; line-height: 130%; padding: 60px }
 #panel { width: 300px; border: 1px solid #0050D0 }
 .head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
 .content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block;display:none; }
 </style>
 <script src="scripts/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function(){
 // $("#panel h5.head").on("mouseover",function(){
  // $(this).next().show();
  // }).on("mouseout",function(){
  // $(this).next().hide();
  // })
  
 // 与上一段代码等价,只是简化了代码
     $("#panel h5.head").on("mouseover mouseout",function(){
          $(this).next().toggle();
     });
 })
 </script>
 </head>
 <body>
 <div id="panel">
     <h5 class="head">什么是jQuery?</h5>
     <div class="content">
         jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
     </div>
 </div>
 </body>
 </html>

移除事件

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起,off() 方法是 unbind()die()undelegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

$(selector).off(event,selector,function(eventObj),map)

事件对象的属性和方法

方法

描述

event.currentTarget

在事件冒泡阶段内的当前 DOM 元素

event.data

包含当前执行的处理程序被绑定时传递到事件方法的可选数据

event.delegateTarget

返回当前调用的 jQuery 事件处理程序所添加的元素

event.isDefaultPrevented()

返回指定的 event 对象上是否调用了   event.preventDefault()

event.isImmediatePropagationStopped()

返回指定的 event 对象上是否调用了   event.stopImmediatePropagation()

event.isPropagationStopped()

返回指定的 event 对象上是否调用了   event.stopPropagation()

event.namespace

返回当事件被触发时指定的命名空间

event.pageX

返回相对于文档左边缘的鼠标位置

event.pageY

返回相对于文档上边缘的鼠标位置

event.preventDefault()

阻止事件的默认行为

event.relatedTarget

返回当鼠标移动时哪个元素进入或退出

event.result

包含由被指定事件触发的事件处理程序返回的最后一个值

event.stopImmediatePropagation()

阻止其他事件处理程序被调用

event.stopPropagation()

阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知

event.target

返回哪个 DOM 元素触发事件

event.timeStamp

返回从 1970 年 1 月 1 日到事件被触发时的毫秒数

event.type

返回哪种事件类型被触发

event.which

返回指定事件上哪个键盘键或鼠标按钮被按下

常用jQuery事件的范例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $("ul li:eq(0)").click(function(){
        alert("单击操作");
    });
 
    $("ul li:eq(1)").dblclick(function(){
        alert("双击操作");
    });

    $("p").mouseenter(function(){
        $("#result").val("mouseenter");
    }).mouseleave(function(){
        $("#result").val("mouseleave");
    }).mousedown(function(){
        $("#result").val("mousedown");
    }).mouseup(function(){
        $("#result").val("mouseup");
    });
 
    $("#result").focus(function(){
        $(this).css("background-color","#cccccc");
    }).blur(function(){
        $(this).css("background-color","#ffffff");
    }); 
})
</script>
</head>
<body>
<ul>
    <li>单击我</li>
    <li>双击我</li>
    <div>     
        <p id="p1">请在此处操作鼠标,文本编辑框内容会变化。如果点击文本框,文本框颜色会变化。</p>
        <input type="text" id="result"/>
    </div>
</ul>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • npm 使用小结

    本文内容基于 npm 4.0.5 概述 npm (node package manager),即 node 包管理器。这里的 node 包就是指各种 javas...

    静默虚空
  • Intellij IDEA 使用小结

    快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键。在这个主题中,您可以找到最不可缺少的列表,使 I...

    静默虚空
  • [Java 安全]加密算法

    Base64编码 算法简述 定义 Base64内容传送编码是一种以任意8位字节序列组合的描述形式,这种形式不易被人直接识别。 Base64是一种很常见的编码规范...

    静默虚空
  • 事件

    JavaScript与HTML之间的交互式通过事件实现的。 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以...

    奋飛
  • Spring之事件监听(观察者模型)

      本文介绍下Spring中的事件监听,其本质也就是观察者模型(发布/订阅模式),具体的观察者模式参考下文

    用户4919348
  • Spring中的事件

    爱撒谎的男孩
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    最近一直在看zepto的源码,希望通过学习它掌握一些框架设计的技巧,也将很久不再拾起的js基础重新温习巩固一遍。如果你对这个系列感兴趣,欢迎点击下方地址watc...

    IMWeb前端团队
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端在最近几年实在火爆异常,vue、react、angular各路框...

    IMWeb前端团队
  • 前端学习(51)~事件的传播和事件冒泡

    重点:捕获阶段,事件依次传递的顺序是:window --> document --> html--> body --> 父元素、子元素、目标元素。

    Vincent-yuan
  • 2018年要考虑的12大云安全威胁

    导语 如今,云计算不断改变组织使用、存储和共享数据、应用程序和工作负载的方式。但也带来了一系列新的安全威胁和挑战。随着大量数据进入云端,尤其是进入公共云服务,这...

    静一

扫码关注云+社区

领取腾讯云代金券