Javascript事件触发顺序

html标签是有子和父的,这个时候就出现了事件触发顺序的问题,比如:

<!DOCTYPE html>
<html>
<head>
<style>
.first{
border:solid #FF0000
}
.second{
border:solid #00FF00
}
.third{
border:solid #0000FF
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".first").click(function(){
    alert(0);
  });
  $(".second").click(function(){
    alert(1);
  });
  $(".third").click(function(){
    alert(2);
  });
});
</script>
</head>
<body>

<div class="first">
testFirst
<div class="second">
testSecond
<div class="third">
testThird
</div>
</div>
</div>

</body>
</html>    

默认情况下,点third,三个事件都会触发,触发顺序为3,2,1.这种方式叫做冒泡触发。

一、使用javascript设置触发方式

可以使用javascript:DOM.addEventListener()方法添加时设置

element.addEventListener(event, function, useCapture);第三个参数为boolean,false的时候冒泡触发(默认值,从最下级的事件开始触发),true的时候为捕获触发(从最上级元素的时间开始触发)。

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

二、使用jQuery设置事件触发方式

1、调用$(selector).on(event,childSelector,data,function,map)绑定时间,可以设置childSelector,意思是只为子元素中的一部分绑定该事件,可以筛选出一部分来绑定,也可以达到效果。

2、$("#hr_three").click(function(event){ 
    return false; 
  });

  传入参数event,return false,为阻止后续所有时间,包括默认点击事件和冒泡时间。

3、event.stopPropagation();

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(如执行了超链接的跳转)

4、event.preventDefault();

事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

事件目标:纯javascript属性event.target
    事件粗粒程序的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性DOM API中规定的,但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即被实际单击的元素)。而且,我们知道this应用的是处理事件的DOM元素,所以可以编写下列代码:
    $(document).ready(function(){
    $(‘#switcher’).click(function(event){
    if(event.target == this){
        $(‘#switcher .button’).toggleClass(‘hidden‘);
}
});
});
此时的代码确保了被单击的元素是<div id=”switcher”>,而不是其它后代元素。

XML DOM target 事件属性
定义和用法
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
语法
event.target

模仿事件操作

返回值:jQuery            trigger(type, [data])

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行(除了a标签的跳转事件)。比如,如果用trigger()触发一个‘submit‘,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

参数

typeString,Event,Object

一个事件对象或者要触发的事件类型

data (可选)Array

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

示例

描述:

提交第一个表单,但不用submit()

jQuery 代码:

$("form:first").trigger("submit")

描述:

给一个事件传递参数(click()同样触发默认事件)

jQuery 代码:

$("p").click(function (event, a, b) {

  // 一个普通的点击事件时,a和b是undefined类型

  // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"

}).trigger("click", ["foo", "bar"]);

描述:

下面的代码可以显示一个"Hello World"

jQuery 代码:

$("p").bind("myEvent",function (event, message1, message2) {

alert(message1 + ‘ ‘ + message2);

});

$("p").trigger("myEvent",["Hello","World!"]);

三、unbind,off(推荐)用于解除绑定事件,但是解除不了标签中的onclick属性事件和默认点击事件,要取消,则要返回false。

且unbind与off是可以使用事件触发传入的event对象来取消时间绑定,用于触发多少次就不再触发(若想触发一次不再触发,则可使用one()来绑定事件)

$(document).ready(function(){
  var x=0;
  $("p").click(function(event){
    $("p").animate({fontSize:"+=5px"});
    x++;
    if (x>=2)
      {
      $(this).unbind(event);
      }
  });
});
时间: 2024-10-23 23:09:18

Javascript事件触发顺序的相关文章

2019-11-29-WPF-多个-StylusPlugIn-的事件触发顺序

原文:2019-11-29-WPF-多个-StylusPlugIn-的事件触发顺序 title author date CreateTime categories WPF 多个 StylusPlugIn 的事件触发顺序 lindexi 2019-11-29 10:20:41 +0800 2019-10-19 09:18:35 +0800 WPF 如果在 WPF 使用 StylusPlugIn 同时在同一个界面用多个元素都加上 StylusPlugIn 那么事件触发的顺序将会很乱 我建议是不要让

ASP.NET 母版页和内容页中的事件触发顺序

母版页和内容页触发事件的先后顺序,触发事件的规则一般是初始化事件是从最里边的控件到最外边的控件,其他事件则是从最外边控件到最里边控件. 下面是一个测试: 第一次触发的是母版页的Init事件. 第二次触发的是内容页的Init事件. 第三次触发的是内容页的Load事件 第四次触发的是母版页的Load事件 总结: 母版页与内容页触发事件的顺序: 1.母版页Init事件. 2.内容页Init事件. 3.内容页Load事件 4.母版页Load事件. 5.内容页PreRender事件. 6.母版页PreRe

Zendframework 模块加载事件触发顺序。

模块加载时事件触发的时间顺序: 1.  loadModule.resolve(ModuleEvent::EVENT_LOAD_MODULE_RESOLVE):模块将被加载时触发,事件监听者将模块名解析成类的实例.监听者使用getModuleName()获取模块名. 2.  loadModule(ModuleEvent::EVENT_LOAD_MODULE):一旦模块被解析成对象后,本事件会被触发,与之相对的事件监听者会加载模块(将新建的对象传递给所有的监听者). 3.  mergeConfig(

关于JS 事件冒泡和onclick,click,on()事件触发顺序

今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox. 查看JQgrid源码,发现它的click事件是绑定到了table上,然后判断事件点击目标,找到选中行给它勾选:而我的click事件是绑定到td里面的div中. 按照事件冒泡的触发顺序,应该是我的事件先触发,之后是JQgrid的事件. 结果不是这样的.我发现JQgrid使用$().click(fu

HTMLDOM-onmousedown、onmouseup 以及onclick事件触发顺序

摘自w3school:http://www.w3school.com.cn/htmldom/dom_events.asp onmousedown.onmouseup 以及 onclick 事件是鼠标点击的全部过程. 首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件.

WAP端 touch事件触发顺序记录

IOS7.0 safari 滚动滚动条的时候, 最后手指放开 (scroll 总是在 touchend后面,所以要用 setTimeout) touchstart touchmove(多个) touchend scroll(一个)IOS8.4 safari 滚动滚动条的时候 touchstart touchmove(多个) scroll(0个或者多个) touchend scroll(0个或者多个) IOS7.0 和 IOS8.4 UC 浏览器 10.6.5.627 滚动滚动条的时候 正常滚动的

JavaScript——事件流(事件冒泡和事件捕获)

1.事件流 当浏览器发展到第4代时,浏览器开发团队遇到了一个问题:页面中的哪个元素会拥有某个特定的事件?当你单击某个按钮时,显然该单击事件并不仅仅发生在按钮上,它还发生在按钮的所有祖先元素上,比如按钮的容器元素,容器元素的父元素,甚至整个页面document.但是,哪个元素最先接收到该事件呢?页面接收事件的顺序又是怎样的呢?由此引出了事件流的概念.事件流描述的就是从页面中接收事件的顺序. 2.两个模型 Netscape和Microsoft给出了两个不同的结论.Netscape说document会

JavaScript事件流原理解析

一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国庆的这段时间来补一补这个不足,也为了国庆后能够更好的完成公司的业务打下基础 二.大致了解什么是JavaScript事件流 首先这里先来举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta chars

Javascript事件机制兼容性解决方案

原文:Javascript事件机制兼容性解决方案 本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTagName('input')[0]; var form = document.getElementsByTagName('form')[0]; Evt.on(input, 'click', function(evt){ console.log('inp