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,为阻止后续包括默认点击事件和冒泡事件的所有事件,但不阻止绑定在该元素上的其他事件。

  这里注意一下,如果是直接onclick方法中return false,则不能阻止事件冒泡,只能阻止默认事件。

3、event.stopPropagation(); 

事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(如执行了超链接的跳转),也不阻止绑定在该元素上的其他事件。

4、event.preventDefault();

事件处理过程中,不阻击事件冒泡,不阻止绑定在该元素上的其他事件,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

5、event.stopImmediatePropagation()

阻止其他事件处理程序被调用,阻止该元素的次优先级程序及所有冒泡事件,但不阻止默认行为。

6、上面

事件目标:纯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);
      }
  });
});

 

posted @ 2015-05-25 23:44  光闪  阅读(17982)  评论(0编辑  收藏  举报