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 绑定事件

语法：

bind(type,data,fn)

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

参数解释：

type (String) : 事件类型

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

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

示例：

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

$("p").bind("click", function(){

  alert( $(this).text() );

});

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

function handler(event) {

//event.data 可以获取bind()方法的第二个参数的数据

  alert(event.data.foo);

}

$("p").bind("click", {foo: "bar"}, handler)

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

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

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

$("form").bind("submit", function(event){

  event.preventDefault();

});

2.2 解绑事件

语法：

unbind(type,fn);

描述：

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

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

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

参数解释：

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

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

示例：

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

$("p").unbind()

将段落的click事件取消绑定

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

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

var foo = function () {

  //绑定事件和解绑事件的事件处理函数

};

$("p").bind("click mouseenter", foo); // 给p段落绑定click mouseenter事件

$("p").unbind("click", foo); // 只解绑了p段落标签的click事件

2.3 自定义事件

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

语法：

trigger(type,data);

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

参数解释：

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

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

示例：

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

$('button').bind('myClick',function(ev,a,b){

    //给button按钮添加的自定义事件myClick事件

})

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

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

3. 事件委托(代理)

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

原理：

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

作用：

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

事件源 :

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

使用情景：

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

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

示例：

<body>

        <ul>

            <li class="luffy">路飞</li>

            <li>路飞</li>

            <li>路飞</li>

        </ul>

</body>

<script src="jquery-3.2.1.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    //通过on()方法

     $('ul').on('click','#namei,.luffy',function(){

        console.log(this);

       })

   //未来追加的元素

    $('ul').append('<a id="namei">娜美</a>')

}

</script>

语法：

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. Android 音视频技术之录音获取实时音量

    一.实时音量相关基础知识 说到获取音量,大家首先想到的应该就是分贝(dB),分贝是一个相对单位(是一个比值,是一个数值,是一个纯计数方法). 在音频领域dB度量的是声音的强度,其计算的公式如下: 在上 ...

  2. 关于svn外网访问的问题-搭建成功

    昨天聊到了svn外网问题.今天,无限查资料,虽然眼累了一些,不过最终实现.还是开心了一下! 背景:本机设置svn服务器,搭建代码库并开设外网 供不再同一地点的他人来访问 上图: 1.svn服务器端 搭 ...

  3. vue中实现百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  4. Android进程管理机制研究

    一.Linux中的进程管理在Linux中,进程是指处理器上执行的一个实例,可使用任意资源以便完成它的任务,具体的进程管理,是通过“进程描述符”来完成的,对应Linux内核中的task_struct数据 ...

  5. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

  6. hive操作简单总结

    Hive DDL.DML操作 背景介绍 • 一.DDL操作(数据定义语言)包括:Create.Alter.Show.Drop等. • create database- 创建新数据库 • alter d ...

  7. MyBatis框架之第一篇

    MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis.201 ...

  8. Linux创建Jenkins启动脚本以及开机启动服务

    1.jenkins.sh #!/bin/bash ###主要目的用于开机启动服务,不然 启动jenkins.war包没有java -jar的权限 JAVA_HOME=/usr/lib/jdk1.8.0 ...

  9. Dynamics CRM中的地址知多D？

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复169或者20151105可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! CRM中的地址以前不是很了解,定 ...

  10. ORACLE 12.2RAC之问题 ora.chad OFFLINE

    问题描述: 早上巡检是发现一套RAC的ora.chad一个节点的状态是offline,其他的均正常. crsctl stat res -t ora.chad               ONLINE  ...