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

相关文章

来自专栏林德熙的博客

WPF 如何画出1像素的线

如何有人告诉你,请你画出1像素的线,是不是觉得很简单,实际上在 WPF 上还是比较难的。 本文告诉大家,如何让画出的线不模糊

2461
来自专栏前端说吧

vue.js: 自定义事件之—— 子组件修改父组件的值

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

4794
来自专栏happyJared

IDEA快捷键拆解系列(五):Navigate篇

  以下是关于Navigate导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

1022
来自专栏瓜大三哥

matlab GUI基础2

GUIDE编程开发 matlab可视化姐买你的设计,一般有两种方法,一是直接通过编辑M脚本文件产生GUI,二是通过MATLAB图形用户界面开发环境GUIDE来建...

2587
来自专栏软件开发

HTML5 学习总结(二)——HTML5新增属性与表单元素

一、HTML5新增属性 1.1、contextmenu contextmenu的作用是指定右键菜单。 <!DOCTYPE html> <html> <h...

3007
来自专栏编程语言

Python:pygame的初步使用

4.创建窗口,pygame.display.set_mode(resolution=(0,0),flags=0,depth=0),resolution窗口大小,...

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

JQuery中bind和unbind函数

测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="c...

1972
来自专栏天天

js事件对象相关随记

1343
来自专栏lhyt前端之路

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

身为前端,打交道最多的就是浏览器和node了,也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程,......,我们直接来到收到...

2402
来自专栏大前端_Web

Vue与React的异同-组件(二)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1422

扫码关注云+社区

领取腾讯云代金券