对于jq里的Event对象的方法一些理解

这些是我从jq手册的Event对象一篇里获取的理解

event.currentTarget 

在事件冒泡阶段中的当前DOM元素

例子:

$("p").click(function(event) {

alert( event.currentTarget === this ); // true

});

概述:相当于this(DOM的)

event.data

当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind。

例子:

$("a").each(function(i) {

$(this).bind(‘click‘, {index:i}, function(e){

alert(‘my index is ‘ + e.data.index);

});

});

概述:不太清楚,貌似可以获取对象的属性

event.delegateTarget

当currently-called的jQuery事件处理程序附加元素。

例子:

$(".box").on("click", "button", function(event) {
  $(event.delegateTarget).css("background-color", "red");
});

概述:delegateTarget是例子中的.box而不是它里面的button

event.isDefaultPrevented()

根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。

例子:

$("a").click(function(event){

alert( event.isDefaultPrevented() ); // false

event.preventDefault();

alert( event.isDefaultPrevented() ); // true

});

概述:没什么好说的

event.isImmediatePropagationStopped()

根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。

例子:

function immediatePropStopped(e) {

var msg = "";

if ( e.isImmediatePropagationStopped() ) {

msg =  "called";

} else {

msg = "not called";

}

$("#stop-log").append( "<div>" + msg + "</div>" );

}

$("button").click(function(event) {

immediatePropStopped(event);

event.stopImmediatePropagation();

immediatePropStopped(event);

});

概述:又一个没什么好说的

event.isPropagationStopped()

根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。

例子:

function propStopped(e) {

var msg = "";

if ( e.isPropagationStopped() ) {

msg =  "called";

} else {

msg = "not called";

}

$("#stop-log").append( "<div>" + msg + "</div>" );

}

$("button").click(function(event) {

propStopped(event);

event.stopPropagation();

propStopped(event);

});

概述:这三个函数下面会说到的

event.namespace

当事件被触发时此属性包含指定的命名空间。

例子:

$("p").bind("test.something", function(event) {

alert( event.namespace );  });

$("button").click(function(event) {

$("p").trigger("test.something");

});

概述:相当于给事件一个副名

event.pageX

鼠标相对于文档的左边缘的位置。

例子:

$("p").on("click", function(a){

alert(a.pageX);

});

概述:记得加上事件对象(例子中的a)

event.pageY

鼠标相对于文档的上边缘的位置。

例子:

$("p").on("click", function(a){

alert(a.pageY);

});

概述:同上

event.preventDefault()

阻止默认事件行为的触发。

例子:

$("a").on("click", function(a){

a.preventDefault();

alert(a.pageX);

});

概述:首先它只能阻止默认事件(比如a链接的跳转,提交按钮的提交行为) 另外它也需要事件对象(例子中的a)

event.relatedTarget

在事件中涉及的其它任何DOM元素

例子:

$("a").mouseout(function(event) {

alert(event.relatedTarget.nodeName); // "DIV"

});

概述: 指事件对应的对象 各个事件的对应方式不一样 比如对于 mouseout 事件,它指向被进入的元素;对于 mousein 事件,它指向被离开的元素。它也需要事件对象

event.result

这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined 。

例子:

$("button").click(function(){
    return "Hello world!";
});
$("button").click(function(event){
    $("p").html(event.result);
})

概述:前面的点击事件返回了一个值,后面的result可以获取其值。这种方式稍显麻烦,但是有时也是有用的

event.stopImmediatePropagation()

阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

例子:

$(document).ready(function(){

$("div").click(function(event){

alert("事件句柄 1 被执行");

});

$("div").click(function(event){

event.stopImmediatePropagation();

alert("事件句柄 2 被执行");

});

$("div").click(function(event){

alert("事件句柄 3 被执行");

});

});

概述:简单来说就是制止后面会发生的事件

event.stopPropagation()

防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。

例子:

$("p").click(function(event){

event.stopPropagation();    // do something

});

概述:点击子元素,触发了子点击事件,但父元素的父点击事件也会触发,这个方法就是为了阻止那种情况(这个情况叫做冒泡事件)

event.target

最初触发事件的DOM元素。

例子:

Html:

<div id="n1" style="height: 100px; background: #eee;" >

<br>

<p id="n2" style="background: #999;" >段落文本...段落文本...<br>

<span id="n3" style="background: #fff;" >专注于编程开发技术分享</span>

</p>

</div>

Jq:

$("div").click( function(event) {

alert("最初触发事件的是:" + event.target.tagName + "#" + event.target.id);

} );

概述:对应冒泡情况用的,获取真正触发的元素

event.timeStamp

这个属性返回事件触发时距离1970年1月1日的毫秒数。(貌似火狐不能用)

这可以很方便的检测某个jQuery函数的性能。

例子:

$(document).ready(function(){

$("button").click(function(event){

$("span").text(event.timeStamp);

});

});

概述:上面的描述已经很清楚了

event.type

这个事件的事件类型

例子:

$("a").click(function(event) {

alert(event.type); // "click"

});

概述:无需语赘

event.which

针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。

例子:

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>

<input id="whichkey" value="type something">

<div id="log"></div>

<script>

$(‘#whichkey‘).bind(‘keydown‘,function(e){

$(‘#log‘).html(e.type + ‘: ‘ +  e.which );  });

</script>

</body>

</html>

概述:能获取键值

时间: 2024-08-01 06:29:29

对于jq里的Event对象的方法一些理解的相关文章

event 对象 小记

event对象的属性提供了有关事件的细节并且通过event对象的方法,可以控制事件的继续传播和阻止事件的默认行为 2级DOM Events 标准定义了一个标准的事件模型  被除了IE外的所有现代浏览器实现     在标准事件模型中event对象传递给事件句柄函数,在处理事件的时候获取事件发生的一些属性和控制事件的一些行为(冒泡和默认行为)   在标准事件模型中,Event的各种子接口定义了额外的属性,也就是可以定义多种种类的event对象  而IE只有一种event对象 应用于所有的事件处理 2

JS和JQ的event对象对比和应用

摘要 js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用 js jquery jq event 代码测试: ? 1 2 3 4 5 6 7 <div id= "test" ><p>test text<p></div> <script src= "vendor/jquery-2.1.1.js" ></script> <script> test.ad

Event对象——属性和方法

1.事件处理程序中返回false的效果: 事件处理程序   返回false的效果 click 单选按钮和复选按钮取消设置,对于submit按钮,表单提交被取消.对于reset按钮,表单不被重 置.对于链接,不装载链接目标 dragdrop 取消拖拽 keydown 在用户按住键不放时,取消随后的keypress事件 keypress 取消keypress事件 mousedown 取消默认行为(拖的开始.选择的开始.解除链接) mouseover 导致对window的status或defaultS

IE8中的Event对象属性与方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

焦点 、event对象、事件冒泡、事件绑定、AJAX知识点备忘

焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 设置焦点的几种方式: 1.点击 2.TAB键 3.JS onfocus   onblur 属性 var oinp=document.getElementById('shuru') oinp.onfocus=function(){ if(oinp.value=='请输入'){ oinp.value='' } } oinp.onblur=function(){ if(oinp.value==''){ oinp

Day28:Event对象、队列、multiprocessing模块

一.Event对象 线程的一个关键特性是每个线程都是独立运行且状态不可预测.如果程序中的其他线程需要通过判断某个线程的状态来确定自己下一步的操作,这时线程同步问题就 会变得非常棘手.为了解决这些问题,我们需要使用threading库中的Event对象. 对象包含一个可由线程设置的信号标志,它允许线程等待某些事件的发生.在初始情况下,Event对象中的信号标志被设置为假.如果有线程等待一个Event对象,而这个Event对象的标志为假,那么这个线程将会被一直阻塞直至该标志为真.一个线程如果将一个E

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

Javascript技术之详尽解析event对象

描述event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转.<HTML><HEAD><TITLE>Cancels Links</TITLE

Python开发基础--- Event对象、队列和多进程基础

Event对象 用于线程间通信,即程序中的其一个线程需要通过判断某个线程的状态来确定自己下一步的操作,就用到了event对象 event对象默认为假(Flase),即遇到event对象在等待就阻塞线程的执行. 示例1:主线程和子线程间通信,代码模拟连接服务器 1 import threading 2 import time 3 event=threading.Event() 4 5 def foo(): 6 print('wait server...') 7 event.wait() #括号里可