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 条评论
登录 后参与评论

相关文章

来自专栏魂祭心

原 canvas绘制clock

5074
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2926
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3665
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2850
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3278
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5228
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2752
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3005
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4214
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3652

扫码关注云+社区