Web前端基础(18):jQuery基础(五)
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 浏览器还支持下面的属性)。
属性 |
描述 |
---|---|
|
如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。 |
fromElement |
对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。 |
keyCode |
对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup |
offsetX,offsetY |
发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
|
如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 |
|
对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
toElement |
对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。 |
x,y |
事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。 |
标准 Event 属性,下面列出了 2 级 DOM 事件标准定义的属性。
属性和方法 |
描述 |
---|---|
bubbles |
返回布尔值,指示事件是否是起泡事件类型。 |
|
返回布尔值,指示事件是否可拥可取消的默认动作。 |
|
返回其事件监听器触发该事件的元素。 |
eventPhase |
返回事件传播的当前阶段。 |
|
返回触发此事件的元素(事件的目标节点)。 |
timeStamp |
返回事件生成的日期和时间。 |
|
返回当前 Event 对象表示的事件的名称。 |
initEvent() |
初始化新创建的 Event 对象的属性。 |
|
通知浏览器不要执行与事件关联的默认动作。 |
|
不再派发事件。 |
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);
描述:
如果没有参数,则删除所有绑定的事件。
如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。
参数解释:
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基础(五)的更多相关文章
- Web前端国际化之jQuery.i18n.properties
Web前端国际化之jQuery.i18n.properties jQuery.i18n.properties介绍 国际化是如今Web应用程序开发过程中的重要一环,jQuery.i18n.propert ...
- 好程序员web前端分享18个用CSS制作出来的东西
好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- Web前端基础(19):jQuery基础(六)
1. ajax 1.1 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通 ...
- Web前端基础(17):jQuery基础(四)
1. jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
- Web前端基础(16):jQuery基础(三)
1. jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 1.1 显示动画 方式一: $("div&quo ...
- Web前端基础(15):jQuery基础(二)
1. jQuery选择器 jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素. 1.1 基本选择器 例子如下: <!DOCTYPE html> ...
- Web前端基础(14):jQuery基础(一)
1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
随机推荐
- java基础-初识类
一 前言 在 <[java基础]-谈谈对面向对象理解 >一文中已经知道什么是对象,如何创建对象:这篇文章主讲对象的类型,简称类: 二 类介绍 2.1 类 每个对象都有一个类型,通常在所有的 ...
- 《Java基础知识》Java常量的申明和使用
常量就是从程序开始运行到结束都不变的量.在 Java 程序设计中,使用关键字“final”来声明一个常量,例如下面的程序代码. 这里的 x 是一个常量,但是是在某个方法内的常量,也可以称为成员常量(作 ...
- Web基础了解版04-XML-Tomcat-Http
XML 什么是XML - Tomcat - Http XML:eXtensible Markup Language (可扩展标记语言). XML 是一种标记语言,很类似 HTML. XML 的设计宗旨 ...
- Linux服务器部署.Net Core笔记:六、安装MySQL
接下来我们在 Centos7 系统下使用 yum 命令安装 MySQL,需要注意的是 CentOS 7 版本中 MySQL数据库已从默认的程序列表中移除,所以在安装前我们需要先去官网下载 Yum 资源 ...
- 18.JAVA-pull解析XML
1.pull解析介绍 pull解析其实和我们上章学的sax解析原理非常类似,在Android中非常常用. 在java中,需自己获取xmlpull所依赖的类库分别为:kxml2-2.3.0.jar,xm ...
- Webpack 一些概念
目录 引子 Dependency Graph Runtime Manifest Module.Bundle.Chunk Bundle Splitting Code Splitting Tree Sha ...
- DFA敏感词过滤实现
package test.java.com.odianyun.util.sensi; import java.util.*; /** * 敏感词处理工具 - DFA算法实现 * * @author s ...
- 亚马逊写作文档tip
亚马逊的文档要求任何一份开会备忘录/要点备忘录都需要控制在4页左右,Jeff 自己也强调过,4页的备忘录比20页的备忘录要求的更高,它不仅需要更好的思考,也需要对开会讨论各个重点之间关系的理解.ppt ...
- Centos7部署mysql
安装mysql yum install mysql mysql-server 会出现以下错误: [root@yl-web yl]# yum install mysql-server Loaded pl ...
- Flask 教程 第十四章:Ajax
本文翻译自The Flask Mega-Tutorial Part XIV: Ajax 这是Flask Mega-Tutorial系列的第十四部分,我将使用Microsoft翻译服务和少许JavaSc ...