1. 事件

前面我们介绍完js的事件流的概念之后，相信大家对事件流也有所了解了。那么接下来我们看一下jquery的事件操作。

在说jquery的每个事件之前，我们先来看一下事件对象 。

1.1 事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

1.什么时候会产生Event 对象呢?

例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象。

2.事件通常与函数结合使用，函数不会在事件发生前被执行！

1.2 事件流的由来

由于微软和网景乱搞，后来必须要为事件传播机制，制定一个标准，因为事件捕获是网景公司开发出来的，而事件冒泡是由微软公司开发出来的，它们都想要自己的技术成为标准，所以导致这两个公司老是干架，制定标准的人为了不让它们干架，所以研发了事件流。

1.3 关于event对象

在触发的事件的函数里面我们会接收到一个event对象，通过该对象我们需要的一些参数，比如说我们需要知道此事件作用到谁身上了，就可以通过event的属性target来获取到(IE暂且不谈)，或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止。以下是event对象的一些属性和方法：

属性

描述

altKey

返回当事件被触发时，”ALT” 是否被按下。

button

返回当事件被触发时，哪个鼠标按钮被点击。

clientX

返回当事件被触发时，鼠标指针的水平坐标。

clientY

返回当事件被触发时，鼠标指针的垂直坐标。

ctrlKey

返回当事件被触发时，”CTRL” 键是否被按下。

metaKey

返回当事件被触发时，”meta” 键是否被按下。

relatedTarget

返回与事件的目标节点相关的节点。

screenX

返回当某个事件被触发时，鼠标指针的水平坐标。

screenY

返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey

返回当事件被触发时，”SHIFT” 键是否被按下

IE属性(除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性)。

属性

描述

cancelBubble

如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。

fromElement

对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。

keyCode

对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup

offsetX,offsetY

发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

returnValue

如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为

srcElement

对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。

toElement

对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。

x,y

事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性，下面列出了 2 级 DOM 事件标准定义的属性。

属性和方法

描述

bubbles

返回布尔值，指示事件是否是起泡事件类型。

cancelable

返回布尔值，指示事件是否可拥可取消的默认动作。

currentTarget

返回其事件监听器触发该事件的元素。

eventPhase

返回事件传播的当前阶段。

target

返回触发此事件的元素（事件的目标节点）。

timeStamp

返回事件生成的日期和时间。

type

返回当前 Event 对象表示的事件的名称。

initEvent()

初始化新创建的 Event 对象的属性。

preventDefault()

通知浏览器不要执行与事件关联的默认动作。

stopPropagation()

不再派发事件。

1.4 Event对象的一些兼容性写法

获得event对象兼容性写法 
event || (event = window.event);

获得target兼容型写法 
event.target||event.srcElement

阻止浏览器默认行为兼容性写法 
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

阻止冒泡写法 
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

2. 事件的绑定和解绑

2.1 绑定事件

语法：

  1. bind(type,data,fn)

描述：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

参数解释：

type (String) : 事件类型

data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象

fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

示例：

当每个p标签被点击的时候，弹出其文本

  1. $("p").bind("click", function(){
  2.   alert( $(this).text() );
  3. });

你可以在事件处理之前传递一些附加的数据。

  1. function handler(event) {
  2. //event.data 可以获取bind()方法的第二个参数的数据
  3.   alert(event.data.foo);
  4. }
  5. $("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

  1. $("form").bind("submit", function() { return false; })

通过使用 preventDefault() 方法只取消默认的行为。

  1. $("form").bind("submit", function(event){
  2.   event.preventDefault();
  3. });

2.2 解绑事件

语法：

  1. unbind(type,fn);

描述：

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数解释：

type (String) : (可选) 事件类型

fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例：

把所有段落的所有事件取消绑定

  1. $("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入

  1. var foo = function () {
  2.   //绑定事件和解绑事件的事件处理函数
  3. };
  4.  
  5. $("p").bind("click mouseenter", foo); // 给p段落绑定click mouseenter事件
  6.  
  7. $("p").unbind("click", foo); // 只解绑了p段落标签的click事件

2.3 自定义事件

其实事件的绑定和解绑，都是我为了自定义事件做准备（大家把jQuery的提供的事件熟记在心），以后对jquery熟了以后，可以玩一下自定义事件

语法：

  1. trigger(type,data);

描述：在每一个匹配的元素上触发某类事件，它触发的是由bind()注册的自定义事件。

参数解释：

type (String) : 要触发的事件类型

data (Array) : (可选)传递给事件处理函数的附加参数

示例：

给一个按钮添加自定义的事件

  1. $('button').bind('myClick',function(ev,a,b){
  2.     //给button按钮添加的自定义事件myClick事件
  3. })

然后通过trigger()触发自定义的事件

  1. $('button').trigger('myClick',[1,2])

3. 事件委托(代理)

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理：

利用冒泡的原理，把事件加到父级上，触发执行效果。

作用：

1.性能要好
2.针对新创建的元素，直接可以拥有事件

事件源 :

跟this作用一样(他不用看指向问题，谁操作的就是谁)，event对象下的。

使用情景：

为DOM中的很多元素绑定相同事件。

为DOM中尚不存在的元素绑定事件。

示例：

  1. <body>
  2.         <ul>
  3.             <li class="luffy">路飞</li>
  4.             <li>路飞</li>
  5.             <li>路飞</li>
  6.  
  7.         </ul>
  8. </body>
  9. <script src="jquery-3.2.1.js"></script>
  10. <script type="text/javascript">
  11. $(document).ready(function(){
  12.  
  13.     //通过on()方法
  14.      $('ul').on('click','#namei,.luffy',function(){
  15.         console.log(this);
  16.        })
  17.  
  18.    //未来追加的元素
  19.     $('ul').append('<a id="namei">娜美</a>')
  20.  
  21. }
  22. </script>

语法：

  1. on(type,selector,data,fn);

描述：在选定的元素上绑定一个或多个事件处理函数

参数解释：
events( String) : 一个或多个空格分隔的事件类型
selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
data: 当一个事件被触发时，要传递给事件处理函数的event.data。
fn:回调函数

Web前端基础(18):jQuery基础(五)的更多相关文章

  1. Web前端国际化之jQuery.i18n.properties

    Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...

  2. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  3. 【前端】之jQuery基础知识

    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...

  4. Web前端基础(19):jQuery基础(六)

    1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...

  5. Web前端基础(17):jQuery基础(四)

    1. jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...

  6. Web前端基础(16):jQuery基础(三)

    1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画 方式一: $("div&quo ...

  7. Web前端基础(15):jQuery基础(二)

    1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素. 1.1 基本选择器 例子如下: <!DOCTYPE html> ...

  8. Web前端基础(14):jQuery基础(一)

    1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  9. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

随机推荐

  1. mybatis源码学习(二)--mybatis+spring源码学习

    这篇笔记主要来就,mybatis是如何利用spring的扩展点来实现和spring的整合 1.mybatis和spring整合之后,我们就不需要使用sqlSession.selectOne()这种方式 ...

  2. spring boot2 修改默认json解析器Jackson为fastjson

    0.前言 fastjson是阿里出的,尽管近年fasjson爆出过几次严重漏洞,但是平心而论,fastjson的性能的确很有优势,尤其是大数据量时的性能优势,所以fastjson依然是我们的首选:sp ...

  3. 后台管理tab栏滑动解决方案

    后台管理系统中比较常见的布局是左边菜单栏,右边tab切换栏,但是一般的tab组件不包含tab页过多的切换问题的,所以需要个性化实现,本文的实现方案是滑动鼠标滚轮绑定tab达到切换的效果,先上一个动态图 ...

  4. bossplayersCTF 1: Vulnhub Walkthrough

    主机扫描: http://10.10.202.130/ <!--WkRJNWVXRXliSFZhTW14MVkwaEtkbG96U214ak0wMTFZMGRvZDBOblBUMEsK--> ...

  5. Windows系统下解决PhPStudy MySQL启动失败

    报错 Apache\Nginx服务正常启动了,但是MySQL却一直启动失败. 解决流程 查看端口是否被占用 打开系统自带的资源管理器,查看监听端口3306是不是被占用,下图中3306端口被mysqld ...

  6. jQuery基础之事件处理

    jQuery基础之事件处理方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> < ...

  7. XGBoost缺失值引发的问题及其深度分析

    1. 背景 XGBoost模型作为机器学习中的一大“杀器”,被广泛应用于数据科学竞赛和工业领域,XGBoost官方也提供了可运行于各种平台和环境的对应代码,如适用于Spark分布式训练的XGBoost ...

  8. 4.Ansible Task控制

    1.tag标签(调试) --skip-tags install_nfs 跳过此标签 -t 指定标签名 [root@manager tasks]# cat task_nfs.yml - hosts: w ...

  9. QT程序自启动

    故事背景:最近涉及到客户端更新自启动的一个问题,客户端检测到自己要更新,弹出一个更新界面,然后退出旧版本,启动新版本 技术调研:QProcess 直接上代码吧 qApp->quit(); QPr ...

  10. ORM查询（细致）：

    ORM查询(细致): 1.正向查找 ret1=model.Book.objects.first() print(ret1.title) print(ret1.price) print(ret1.pub ...