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

相关文章

来自专栏lonelydawn的前端猿区

css选择器

下面是一张取自w3cschool的css选择器表 链接地址:http://www.w3school.com.cn/cssref/css_selectors.as...

1766
来自专栏前端萌媛的成长之路

display:none和visibility:hidden的区别

1452
来自专栏一枝花算不算浪漫

[jQuery学习系列四 ]4-Jquery学习四-事件操作

3619
来自专栏HTML5学堂

点击块,让小块动起来 - 函数封装

上一期我们主要讲解JS逻辑和DOM的结合 - JS设置标签的内容和样式,它是实现页面交互效果的重要基础知识。如果想具体了解JS设置标签的内容和样式,可以回复“标...

28612
来自专栏超然的博客

vue—你必须知道的

不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文...

1032
来自专栏WD学习记录

html学习笔记1

1.网页文档的结构和格式的定义是由HTML元素来完成的.HTML元素是由单个或一对标签定义的范围。一个标签就是左右分别有(<)(>)的字符串。开始标签是指不以/...

933
来自专栏前端知识分享

第60天:js常用访问CSS属性的方法

点语法可以得到 width  属性  和 top属性  带有单位的。 100px

571
来自专栏技术墨客

React JSX语法与组件

上面这段有趣的例子既不是标准的JavaScript也不是HTML,它就是我们接下来要介绍的JSX的语法,是一种JavaScript的扩展。在React中使用JS...

1295
来自专栏天天

动画

492
来自专栏编程坑太多

事件对象的使用、属性和方法

983

扫码关注云+社区