www.301.netjQuery中的事件与动画片,冒泡机制

1、 jQuery中的事件:

1.事件流

众所周知,页面在加载时,会触发load事件;当用户单击某个按钮时,会触发该按钮的click事件。

●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现

●jQuery事件是对JavaScript事件的封装,常用事件分类

   ●基础事件

  • 鼠标事件
  • 键盘事件
  • window事件
  • 表单事件

  ●复合事件

  • 鼠标光标悬停
  • 鼠标连续点击

事件流:从页面中接收事件的顺序。也就是说当一个事件产生时,这个事件的传播过程,就是事件流。

这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样,

2、基础事件:

  • IE的事件流

通过种种事件实现各项功能或执行某项操作。事件在元素对象与功能代码中起着重要的桥梁作用。

●语法:

  IE中的事件流叫事件冒泡;事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到window对象,只有IE8及下不这样);

在jQuery中,事件总体分为两大类:简单事件和复合事件。

    时间名=”函数名()”;

再多说一句,现在的浏览器默认是采用的是事件冒泡;在DOM0级方法绑定事件只能是事件冒泡,不能设置;在DOM2级你可以设置是用事件冒泡还是事件捕获(下面说);

jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件、鼠标事件、键盘事件、表单事件等,

     或:

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>

只是其对应的方法名称有略微不同。

    DOM 对象.事件名=函数

<title>事件冒泡</title>
<style type=”text/css”>
#child{background: red;width:
50px;height: 50px;}
#father{width: 100px;height:
100px;background: green;}
#grandparent{
width: 150px;height: 150px;background:
black;margin: 100px auto 0;}
</style>
</head>
<body>
<div id=”grandparent”>
<div id=”father”>
<div
id=”child”></div>
</div>
</div>
</body>
<script
type=”text/javascript”>
var
grandparent=document.getElementById(“grandparent”);
var
parent=document.getElementById(“father”);
var
child=document.getElementById(‘child’);
var body=document.body;
var
html=document.getElementsByTagName(“html”)[0];
child.onclick=function(){
console.log(“我是儿子”);
}
parent.onclick=function(){
console.log(“我是父亲”);
}
grandparent.onclick=function(){
console.log(“我是爷爷”);
}
window.onclick=function(){
console.log(“我是window”);
}
document.onclick=function(){
console.log(“我是document”);
}
html.onclick=function(){
console.log(“我是html”);
}
body.onclick=function(){
console.log(“我是body”);
}
</script>

复合事件则是截取组合了用户操作,并且以多个函数作为响应而自定义的处理程序。

●载入事件:在jQuery中,常用的window事件有文档载入事件,它对应的方法是ready()。

</html>

下面总结一下jQuery中的简单事件和复合事件。

●鼠标事件:当用户在文档上移动或单击鼠标而产生的事件。

当我点击红色部分

一、DOM加载事件

  页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表

展示两个事件的异同。

执行时机

 window.onload方法

$(document).ready()方法

必须等待所有内容加载完成后才能执行

页面的DOM元素绘制完成后可以执行不必等待全部内容加载完成。

 绑定函数个数

该方法能够绑定一个函数,如果绑定多个只能执行最后的一个绑定。例:

window.onload=function(){alert(“1”);}

window.onload=function(){alert(“2”);}

执行结果只执行最后绑定的函数结果是打印:2.  

 

 能够注册多个函数,按绑定顺序执行绑定函数。例:

$(document).ready(funtction(){alert(“1”);});

$().ready(function(){alert(“2”);});

执行结果是顺序执行绑定的函数:先打印1.然后再打印2.

 简化写    法

 无

 $().ready();$.ready()

1.$(document).ready()

$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异:

 

 当一个文档完全下载到浏览器中时,会触发window.onload事件。而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕。

一个页面中一般只有一个onload事件处理程序,而且只能一次保存对一个函数的引用;而$(document).ready()是可以有多个。

一般来说$(document).ready()都要优于使用onload事件处理程序。但是如果关联文件还没有加载完成,则类似图像高度、宽度的属性的调用就会有问题,因此需要在不同的时候选择合适的方法。

$(document).ready()有三种写法,分别是:

  • 1 $(document).ready(function() {
    2 //this is the coding...
    3 
    4 }); 
    5 
    6 >$().ready(function() {
    7 //this is the coding...
    8 });
    9 >$(function() { 
    

    10 //this is the coding…
    11 }); 

方法

描述

执行时机

click( )

触发或将函数绑定到指定元素的click事件

单击鼠标时

mouseover( )

触发或将函数绑定到指定元素的mouseover事件

鼠标指针移过时

mouseout( )

触发或将函数绑定到指定元素的mouseout事件

鼠标指针移出时

mouseenter( )

触发或将函数绑定到指定元素的mouseenter事件

鼠标指针进入时

mouseleave( )

触发或将函数绑定到指定元素的mouseleave事件

鼠标指针离开时

www.301.net 1

 

                ★eg:$(“.nav-ul
a”).mouseover(function(){       //当鼠标移入菜单时

 

二、事件处理

  当文件加载完成后就可以为元素添加事件处理,进而事件执行某些动作完成相关操作。jquery中有多种事件处理方法,主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法为匹配的元素进行特定的事件绑定。bind()方法格式如下:

   bind(type,[ data],fun);

  bind()方法有三个参数,各个参数说明如下:

  第一个参数是事件类型,主要如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定义名称,Jquery中的事件绑定类型比javascript少了”on”,因此jquery中事件click对应javascript中的onclick函数。

  第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。

  第三个参数是用来绑定的处理函数。

  为按钮绑定单击事件示例:

    <input type=”button” id=”btn1″ value=”单击”>

    $(“#btn1”).bind(“click”,function(){alert(“单击事件绑定”);});

  bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样,区别在于one()方法绑定的事件只能执行一次。

  为按钮绑定一次性事件示例:

    <input type=”button” id=”btn1″ value=”单击”>

    $(“#btn1”).one(“click”,function(){alert(“单击事件绑定”);});

  unbind()方法为元素取消事件绑定,unbind()方法的格式如下:

    $(selctor).unbind([type],[data])

  unbind()方法是元素bind()方法的反向操作,从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型,第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

  示例:

    <input type=”button” id=”btn1″ value=”click” />

    <input type=”button” id=”btn2″ value=”removeBind” />

    $(“#btn1”).bind(“click”, fun1 = function () { alert(“事件1”);
});

    $(“#btn1”).bind(“click”, fun2 = function () { alert(“事件2”);
});

    $(“#btn2”).bind(“click”, function () {
    $(“#btn1”).unbind(“click”, fun2);
    });

    该示例使用unbind()方法的二个参数形式移除第二次绑定的事件处理函数。

  live()方法为元素动态绑定事件,使用该方法绑定事件后,新加对应元素也能触发相应事件。live()方法格式如下:

    $(selector).live([type],[data],fun);

   live动态绑定示例:

    $(“p”).live(“click”,function(){$(this).hide();});

  该示例为所有的p元素节点动态添加了click事件,无论是现有的p元素节点还是以后要添加的p元素节点都有会中点单击时候触发hide()从而隐藏自己。die()方法是live()方法的反向操作,结果live()方法动态绑定的事件和unbind()方法一样。使用die()方法取法动态绑定后,所有动态绑定的事件将删除。

  trigger()方法在匹配的元素上触发参数中的事件,该方法会触发浏览器默认事件,返回false阻止浏览器默认事件。trigger()方法格式如下:

    $(selector).trigger([type],[data]);

  trigger()方法示例:

    $(“form:first”).trigger(“submit”);

  该示例触发第一个from表单的submit操作。

  triggerHandler()方法这个方法会触发绑定事件,但是不会触发浏览器默认事件。与trigger()方法触发后返回false效果一样。使用方法和trigger一样。

                                   
$(this).css(“background-color”,”#f01e28″);

会打印这样:

 三、事件

  事件处理中已经列出了主要的事件类型如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各个事件类型主要是两种用法绑定事件、触发事件。以click事件为例,click方法格式如下:绑定事件$(selector).click(functiron(){//函数体}),触发事件$(selector).click()。例:

  <input type=”button” id=”btn1″ value=”绑定事件”/>

  <input type=”button” id=”btn2″ value=”触发事件”/>

  $(“#btn1”).click(function(){alert(“事件绑定”);});

  $(“#btn2”).click(function(){$(“#btn1”).click();})

*  *该示例为第一个按钮btn1绑定事件,为按钮btn2绑定事件同时在绑定事件中触发第一个按钮的绑定事件。其余事件类型和click类似。

                    });

 

 四、合成事件

  合成事件也可以称为交互事件是JQuery自定义的方法,方法有两个hover()和toggle()。

  hover()方法模仿鼠标悬停事件,方法格式如下:hover(enter,leave)。例:

  $(“ul
li”).hover(function(){alert(“Enter”);},functiron(){alert(“leave”);});

  该示例为ul的li元素绑定悬停事件,当鼠标停上ul的子元素li上时候会触发enter()函数,打印“Enter”,当鼠标移出li元素时候会打印”leave”。

  toggle()方法切换操作循环执行绑定的函数,方法格式如下:toggle(fun1,fun2,…,funN);例:

  <input type=”button” id=”btn1″ value=”触发切换操作”/>

  $(“#btn1”).toggle(function(){alert(“开始”);},function(){alert(“继续”);},function(){alert(“结束”);});

  该示例为按钮btn1绑定切换事件每次单击都会顺序触发绑定事件中的一个。该示例第一次点击打印”开始”,第二次点击打印”继续”,第三次点击打印”结束”,再次点击和第一次一样打印”开始”,循环顺序执行函数。

                   $(“.nav-ul
a”).mouseout(function(){        //当鼠标移出菜单时

www.301.net 2

 五、事件属性

  Jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能正常运行。各个事件属性的如下:

  事件类型event.type.该属性用于获得触发该事件的类型,对不引发事件的不同操作返回不同的结果;例:

    $(“p”).click(function(event){alert(event.type);});

  该示例返回元素p单击事件的事件类型,结果打印是 “click”;

  事件类型event.target该属性用于获得触发事件的元素;例:

    $(“a”).click(function(event){alert(event.target.href);});

  该示例返回元素a的href属性。

  事件默认行为event.preventDefault;该属性用于阻止事件的默认属性,例:

    $(“a”).click(function(event){event.preventDefault;});

  使用该属性阻止元素a的默认的跳转行为,结果和return false一样。

  事件冒泡event.stropPropagation属性用于阻止事件冒泡,例:

    $(“div”).click(function(event){alert(“里层点击”);event.stopPropagation;});

  该示例中使用stopPropagation属性阻止div的父元素的click事件被触发。

  event.pageX和event.pageY属性,使用这两个属性可以获得鼠标的相对于页面的当前位置。例:

    $(“p”).click(function(event){alert(“current mouse location
 “+event.pageX+” “+event.pageY);});

  该示例当点击元素p的时候获得鼠标的当前位置,并打印出来。

  event.witch属性,使用这个属性可以获得鼠标单击时候鼠标的左中右键,在键盘事件中获得键值。

    $(“p”).mousedown(function(event){alert(event.witch);});

  该示例当鼠标按下时候打印鼠标键值。左中右健分别对应值是1、2、3。

  event.metaKey属性用于在事件获得键盘的ctrl键,例:

    $(“body”).keydown(function(event){if(event.metaKey){alert(“ctrl”);}else{alert(“no
ctrl”);}});

  该示例当在页面中按下键盘时候如果按键为ctrl键就打印ctrl,否则打印”no
ctrl”.

                                 
$(this).css(“background-color”,”#ff2832″);

我测试了(PS:我用的都是最新版的)chrome,firefox,opera,IE11,IE10,IE9都是这个结果,也就是说现在都冒泡到window对象,不仅仅是到document对象,但是IE8及之前的就冒泡到document就结束了;

  六、事件冒泡

事件捕获: 允许多个元素响应事件的一种策略。在事件捕获的过程中,事件首先会交给最外层的元素,接着再交给更具体的元素。

事件冒泡:另外一种相反的策略叫时间冒泡,当事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。事件冒泡有时候会产生副作用,导致始料不及的行为。

  页面中有多个绑定事件因此可能出现多个元素响应同一个事件,由此引发了事件不是我们预期的,这种现象就是事件冒泡,要处理这个问题可以对事件的作用范围进行限制,Jquery中使得stopPropagation()方法停止事件的冒泡。事件冒泡示例:

  

1 <body><div>事件冒泡div内容</div>body内容</body>
2 
3   $("body").click(function(){alert("body");});
4 
5   $("body div").click(function(){alert("div");});
6 
7   $("span").click(function(){alert("span");});

 

  在该示例中当点击span时候会触发三个打印事件 “span” “div”
“body”,如何阻止事件冒泡?可以使用Jquery事件中的stropPropagation()方法来停止事件冒泡。上面示例改成这样:

  

1 $("body").click(function(event){alert("body");event.stopPropagation();});
2 
3   $("body div").click(function(event){alert("div");event.stopPropagation();});
4 
5   $("span").click(function(event){alert("span");event.stopPropagation();});

指定默认操作

通过调用.preventDefault()方法可以在出发默认操作之前终止事件。

调用 event.stopPropagation()停止事件传播

 

jQuery提供了一个.stopPropagation()方法,使用该方法可以完全阻止事件冒泡。实例代码如下:

 1 $(document).ready(function() {
 2     $('switcher').click(function(event){
 3         if(this.id == 'switcher-narrow'){
 4             $('body').addClass('narrow');
 5         }
 6         else if(this.id == 'switcher-large'){
 7             $('body').addClass('large');
 8         }
 9         $('switcher .button').romoveClass('selected');
10         $(this).addClass('selected');
11         event.stopPropagation();
12     };)
13 });

阻止:

1 $(document).ready(function() {
2     $('switcher').click(function(event){
3         if(event.target == this)
4         {
5             $('switcher .button').toggleClass('hidden');
6         }
7     };)
8 });

 

  这样当点击不同元素时候就不会发生冒泡事件。

 

                    });

这就是事件冒泡,它会把你这个click事件,一级一级的向上传递,如果相应的元素也绑定click事件处理程序(这里强调是click事件,如果你是给绑定了其它事件,那没用),那么它的这个事件处理程序也会执行,也就产生了上面的结果了;

 七、事件命名空间

  事件添加命名空间便于事件的管理:删除事件和触发事件。例:

  <div>元素绑定多个事件</div>

  $(“div”).bind(“click.plugin”,function(){alert(“click.plugin”);});

  $(“div”).bind(“click”,function(){alert(“click”);});

  $(“div”).bind(“mouseover.plugin”,function(){alert(“mouseover.plugin”);});

  $(“div”).bind(“dbclick”,function(){alert(“dbclick”);});

  由于使用了命名空间可以删除指定命名空间中的事件,如移除所有plugin命名空间下的事件函数方法如下:$(“button”).click(function(){$(“div”).unbind(“.plugin”);});这样就移除了所有命名空间是plugin的事件函数。div中只剩下click和dbclick绑定事件。

  使用命名空间对触发特定的事件了带来了方便,如为div绑定了两个click事件,一个是带命名空间的一个是不带命名空间。如果想要触发不包含在命名空间中的事件可以使用trigger(“click!”)方法,!感叹号的作用是匹配所有不包含在命名空间中的click方法。

复合:

在进行事件捕获的时候,常常需要捕获组合的用户操作,并且以多个函数作为响应,这些事件我们称为复合事件。

jQuery提供的.read()方法就是最常用的符合事件方法之一,除此之外,还有进行交互处理的时候用到的两个函数:

.hover(over,out)   
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

.toggle(fn,fn)   每次点击时切换要调用的函数。



 

                       
                                  动画

如果说行(action)胜于言,那么在JavaScript的世界里,效果则会让操作(action)更胜一筹。

通过jQuery,不仅能够轻松地为页面操作添加简单的视觉效果,甚至能创建出更为精致的动画。

jQuery效果能够增添页面的艺术性,一个元素逐渐滑入视野而不是突然出现时,带给人的美感是不言而喻的。

此外,当页面发生变化时,通过效果吸引用户的注意力,则会显著增强页面的可用性。

方法名

说明

Hide()跟show()

同时修改多个样式属性:高度、宽度、不透明度

fadeIn(),fadeout()

只修改不透明度

slideUp()和slideDown()

只改变高度

fadeTo()

只改变不透明度

Toggle()

用来替代hide()方法和show()方法,所以会同时修改多个样式属性即高度宽度和不透明度

slideToggle()

用来代替slideUp()和slideDown()方法,所以只能改变高度

Animate()

属于自定义动画的方法,以上各种动画方法实质上都掉了了animate()方法,直接使用animate()方法还能自定义其他的属性样式,例如left,marginLeft,scrollTop等

jquery中常用的动画的方法就是hide()与show().

              ◆鼠标事件方法的区别:

www.301.net 3

一、show()方法和hide()方法

  show()方法和hide()方法是jquery中最基本的动画方法。使用show()方法会将隐藏的元素显示出来,使用hide()方法会将元素的属性设置为display:none。使用hide()方法会记住原来的display属性值,并把现在的display属性设置为none;show()方法会元素的属性设置为hide()前的属性值。

  示例:

  $(“btnShowHide”).toggle(function(){$(“p”).hide();},function(){$(“p”).show();});

  该示例点击button按钮时候交替切换p元素的状态为隐藏和可见状态,此时该方法同css(“diplay”,”none/block/inline”)效果一样,但是hide()和show()方法可以带有参数调整动作的执行速度。分别为”slow”,”normal”,”fast”,对应时间为0.6秒、0.4秒和0.2秒。也可设置整数指定执行时间数字计数级别是毫秒。如:(“p”).show(1000);该示例使p元素中1秒内显示完毕。也能添加回调事件函数。

用于创建自定义动画的函数。 
返回值:jQuery animate(params, [duration], [easing], [callback]) 

如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。paramsOptions一组包

含作为动画属性和终值的样式属性和及其值的集合

params
对象{},注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left,如果使用的是“hide”、

“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。 

duration (可选)三种预定速度之一的字符串(“slow”, “normal”, or
“fast”)或表示动画时长的毫秒数值(如:1000)

easing
(可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear”
和 “swing”

callback (可选)Function在动画完成时执行的函数


 

$(element).hide()这段代码可以与这相等element.css(“display”,”none”)

 在hide(time)与show(time)中填入事件,可以慢慢消失跟显现。可以修改元素的多个样式,高度,宽度,不透明度。

另一组方法fadeIn()与fadeOut()这个与hide跟show不同的是,当使用hide或者show的时候会改变网页的高度,而fadeIn与fadeOut则不会。

1  $("#panel h5.head").toggle(function(){
2                     $(this).addClass("highlight");
3                     $(this).next().fadeOut(1000);
4                 },function(){
5                     $(this).removeClass("highlight");
6                     $(this).next("div .content").fadeIn(1000);
7                 });

停止动画

1  if($('.swaplist,.mainlist').is(':animated')){
2      $('.swaplist,.mainlist').stop(true,true);
3  }

方法

形象的就是跟水里的鱼吐泡泡似的,慢慢的向上传递;

二、fadeIn()方法和fadeOut()方法

  fadeIn()方法和fadeOut()方法只改变元素的不透明度借以改变元素的显示状态。例:

  $(“btnfade”).toggle(function(){$(“p”).hide();},function(){$(“p”).show();});

  该示例通过改变元素的不透明度改变元素的是显示状态,同show()和hide()方法一样也可以添加速度参数。也能添加回调事件函数。

相同点

  • 事件捕获

三、slideUp()方法和slideDown()方法

  slideUp()方法和slideDown()方法通过改变元素的的显示状态。例:

  $(“btnHeight”).toggle(function(){$(“p”).hide();},function(){$(“p”).show();});

  该示例通过改变元素的高度改变元素的是显示状态,同show()和hide()方法一样也可以添加速度参数。也能添加回调事件函数。

不同点

  事件捕获是网景(Netscape)提出来的,事件捕获是不太具体的元素应该更早接受到事件,而最具体的节点应该最后接收到事件。他们的用意是在事件到达目标之前就捕获它;也就是跟冒泡的过程正好相反,以html的click事件为例,document对象(DOM级规范要求从document开始传播,但是现在的浏览器是从window对象开始的)最先接收到click事件的然后事件沿着DOM树依次向下传播,一直传播到事件的实际目标;我测试了一下(我用的都是最新的浏览器),chrome,opera,firefox,IE11到IE9都支持事件捕获。

四、自定义动画

  前面三种类型动画方法满足用户的各种需求,需要采取一些高级的自定义动画来解决问题,Jquery中定义了animate()方法来实现自定义动画,语法结构为:animate(params,speed,callback);

  参数如下:params一个包含样式属性及值的映射,比如:{width:”500″,height:”300″,….};speed速度参数,可选。callback在动画完成时执行的函数,也是可选的。

mouseover( )

代码等着我在下面讲DOM事件流再一块说明;

  1、自定义简单动画

  自定义一个简单动画使元素中页面飘动,示例如下:

  先定义样式

 1 <style type="text/css">
 2 .panel
 3 {
 4 position: relative;  //位置样式必须为relative或者absolute.
 5 width: 200px;
 6 height: 200px;
 7 border: 1px solid;
 8 background: #96E555;
 9 }
10 </style>

 

页面中定义一个div元素class=”panel”。

<div class=”panel”></div>

设置元素点击事件时候触发动画事件,事件绑定函数如下:

1 $(".panel").click(function () {
2 $(this).animate({ top: "100px", left: "500px" }, 1000);
3 });

 

这样一个简单的动画就完成了,页面加载完成后当点击元素时候div元素会中1秒内,移动到指定位置。

鼠标进入被选元素时会触发

  • DOM事件流

2、累加动画

上面只实现了一次性位置改变,也实现累加改变位置动画,只需要改变事件绑定函数如下:

1 $(".panel").click(function () {
2 $(this).animate({ top:"+=100px", left: "+=50px" }, 1000);
3 });

 

这样连续点击div元素时元素位置会连续改变。实现了动画的累加。

鼠标在其被选元素的子元素上来回进入时:

  DOM2级中规定了事件流要包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。这是W3C采用了他们两家的事件监听机制。(说点题外话,w3c中的很多标准就是这样,浏览器厂商有很多自己的私有解决问题方式,好用的就被W3c采纳了)DOM2级还规定,实际发生事件的元素在捕获阶段不能接收到事件。我们就以上面的事件冒泡时的代码说明这个过程:按照标准是这样的,当一个元素产生了事件,事件是从document到html再到body再到DIV爷爷再到DIV爸爸,这时候捕获阶段就应该停止了,再进入下一个阶段“处于目标阶段”,然后是从DIV爸爸到DIV爷爷再到body再到html再到document,这就是事件冒泡阶段;实际上我们把处于目标阶段即第二阶段看作是冒泡阶段的一部分,即冒泡的开始;实际上是怎么样的呢?先上代码,还是前面的代码只是改了一下js代码:

3、顺序动画

  上面的动画top位置和left位置是同时改变的,也可以顺序执行位置改变动画,如下:

1 $(".panel").click(function () {
2 
3 $(this).animate({ top: "+=50px" }, 1000);
4 $(this).animate({ left: "+=50px" }, 1000);
5 });

 

这样当点击div元素时候动画就会顺序执行先改变top位置,再改变left位置,连续点击连续改变。也可以改写成链式形式如下:

1 $(".panel").click(function () {
2 
3 $(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000);
4 });

 

像这样的动画的执行按顺序执行,又可以称为”动画队列”。

触发mouseover( )

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>事件冒泡</title>

4、回调函数

  在动画结束后可以使用回调函数改变元素的样式、内容等来达到想要的显示效果。如在div元素示例中添加回调函数如下:

  

1  $(this).animate({ top: "+=50px" }, 1000).animate({ left: "+=50px" }, 1000, function () { $(this).css("border", "5px solid blue"); });

 

  通过在最后一个animate方法加添加回调函数,在动画结束后回调函数会改变元素的边框宽度和颜色。

不触发mouseenter

<style type=”text/css”>
#child{ background: red; width:50px;
height:50px; }
#father{ width:100px; height:100px;
background:green; }
#grandparent{ width:150px; height:150px;
background:black; margin:100px auto 0; }
</style>
</head>
<body>
<div id=”grandparent”>
<div id=”father”>
<div
id=”child”></div></div>
</div>
</body>
<script type=”text/javascript”>

   5、停止动画和动画状态

  上面的示例中如果连续点击div元素,动画会一直执行相应的次数后才停止,使用stop()方法可以停止正在进行的动画。stop方法结构是stop([clearqueue],[gotoEnd])两个参数都是可选参数,参数都是bool值true或false。如果clearqueue为true则方法会清除动画队列,如果gotoEnd为true动画直接跳转到结束状态。以合成事件hover为例:使用上面的div元素为元素绑定hover事件如下:

  

1 $(".panel").hover(function(){$(this).stop().animate({height:"200px"},2000);},function(){$(this).stop().animate({height:"300px"},2000);});

 

  该示例中使用无参数的stop()方法停止当前正在执行的动画然后执行stop()方法后面的新的动画。不带参数的stop方法停止的是当前正在执行的动画,如果是当前动画后有动画等待执行stop()方法后后面的动画会继续执行,此时需要使用带参数的stop方法停止动画并清空动画队列,或者使动画直接到达最后状态。

  动画状态用于判断元素是否处理正在动画状态,判断方法和jquery选择器一样使用.is(“:animated”)方法来判断,使用该方法可以跟据元素是否处于动画状态来做出相应的操作。例:如果元素处理动画状态就不添加新的动画,否则添加新动画。

  

1 if(!$(".panel").is(":animated")){$(this).animate({left:"+=300"},2000);}

 

mouseenter( )

var grandparent =
document.getElementById(“grandparent”);
var parent =
document.getElementById(“father”);
var child =
document.getElementById(‘child’);
var html =
document.getElementsByTagName(“html”)[0];
var body = document.body;

 6、交互的动画方法

  Jquery提供了3种专门用于交互的动画方法:toggle(speed,[callback])、slideToggle(speed,[callback])、fadeTo(speed,opacity,[callback])。

  toggle方法用于切换元素的可见性状态,如果元素是隐藏的则显示元素,如果元素是可见的则隐藏状态。例:

1 $("#btntoggle").click(function () {
2 
3 $(this).prev("div.panel").toggle(3000, function () { alert($("div.panel").is(":visible")); });
4 
5 });

 

该示例使用toogle交互方法改变div元素的可见性,在动画结束后打印元素的当前可见性状态。

slideToggle方法用于通过改变高度改变元素的可见性状态,例:

1 $("#btntoggle").click(function () {
2 
3 $(this).prev("div.panel").slideToggle(3000, function () { alert($("div.panel").is(":visible")); });
4 
5 });

 

该示例通过使用slideToggle方法改变元素的高度实现元素的可见性改变,最后在动画执行结束后执行回调函数打印元素的当前状态。

fadeTo方法用于改变元素的透明度,使用该方法也可以实现可见性的改变。例:

1 $("#btntoggle").click(function () {
2 
3 $(this).prev("div.panel").fadeTo(3000,0.2,function () { alert($("div.panel").css("opacity"); });
4 
5 });

 

 

使用方法改变元素的透明度,然后使用回调函数打印元素的当前透明度。

animate实例:

1.点击按钮后div元素的几个不同属性一同变化

1 $("#go").click(function () {
2     $("#block").animate({
3         width: "90%",
4         height: "100%",
5         fontSize: "10em",
6         borderWidth: 10
7     }, 1000);
8 });

 

2.让指定元素左右移动

1 $("#right").click(function () {
2     $(".block").animate({ left: '+50px' }, "slow");
3 });
4 $("#left").click(function () {
5     $(".block").animate({ left: '-50px' }, "slow");
6 });

 3.在600毫秒内切换段落的高度和透明度

1 $("p").animate({
2     height: 'toggle', opacity: 'toggle'
3 }, "slow");

4.用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)

1 $("p").animate({
2     left: 50, opacity: 'show'
3 }, 500);

5.切换显示隐藏

 1 $(".box h3").toggle(function(){
 2     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 3         $(this).addClass("arrow");
 4         return false;
 5  
 6     },function(){
 7         $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 8         $(this).removeClass("arrow");
 9         return false;
10     });
11 });

1 //滚动焦点
2 $(window).scroll(function () {              //当前窗口的滚动事件
3 var winTop = $(window).scrollTop();     //获取当前窗口的大小
4 var objTop = $("#obj1").offset().top;   //获取当前对象的x坐标
5 });

 

 

关于事件和动画总结至此!

                       
                                                    

                                                                     
                                                生命不息,编码不止。

 

                                                                     
                        
爱自己 爱生活  爱代码  爱音乐 爱文字
爱交友**

 

                         
                                  

   

www.301.net 4©北京你好!

      

            作者:微冷的风

            出处:http://www.cnblogs.com/smbk/ 

            本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

mouseout( )

grandparent.addEventListener(“click”,function ()
{console.log(“I am capturing
grandparent”); },true);

鼠标离开被选元素时会触发

grandparent.addEventListener(“click”,function () {console.log(“I am
grandparent”); },false);
parent.addEventListener(“click”,function()
{console.log(“I am parent”); },false);
parent.addEventListener(“click”,function()
{ console.log(“I am capturing parent”); },true);
child.addEventListener(“click”,function()
{ console.log(“I am capturing child”); },true);
child.addEventListener(“click”,function()
{ console.log(“I am child”); },false);
body.addEventListener(“click”,function() {
console.log(“I am body”); },false);
body.addEventListener(“click”,function() {
console.log(“I am capturing body”); },true);
html.addEventListener(“click”,function() {
console.log(“I am capturing html”); },true);
html.addEventListener(“click”,function() {
console.log(“I am html”); },false);

鼠标在其被选元素的子元素上来回离开时:

document.addEventListener(“click”,function() { console.log(“I am
capturing document”); },true);

触发mouseout

document.addEventListener(“click”,function() { console.log(“I am
document”); },false);
window.addEventListener(“click”,function()
{console.log(“I am window”); },false);
window.addEventListener(“click”,function()
{console.log(“I am capturing window”); },true);
</script></html>

不触发mouseleave

代码有点多见谅了!也是为了最能说明问题!

mouseleave( )

打印是这样的:

 

www.301.net 5

●键盘事件:键盘事件是指当键盘聚焦到Web浏览器时,用户每次按下或释放键盘上的按键时都会产生事件。常用的键盘事件有keydown、keyup、keypress。

 

方法

描述

执行时机

keydown( )

触发或将函数绑定到指定元素的keydown事件

按下键盘时

keyup( )

触发或将函数绑定到指定元素的keyup事件

释放按键时

keypress( )

触发或将函数绑定到指定元素的keypress事件

产生可打印的字符时

www.301.net 6

      ◆eg:$(“[type=password]”).keyup(function () {   
//当键盘释放时

这是我点击最里面DIV儿子元素所发生的情形,可以看出捕获阶段也能触发目标元素上的事件,而不仅仅是在冒泡阶段;并且还是从window开始,到最后再以window对象结束,浏览器厂商就是任性,不把W3c看在眼里。你的标准我想实现就实现不想就不实现;

                          $(“#events”).append(“keyup”);

当我把DIV爷爷的事件绑定方式换成DOM0级的方式,其他的保持不变,即

                   }).keydown(function (e) {          
 //当键盘按下时

grandparent.onclick = function() {    console.log("我是在哪个阶段发生呢?")  }

                         $(“#events”).append(“keydown”);

是这样打印的

                   }).keypress(function () {        
//向密码框输入字符时

www.301.net 7

                         $(“#events”).append(“keypress”);

再次说明了我上面在IE事件流中强调的,用DOM0级绑定事件时,事件只发生冒泡的阶段;

                   });

 

     $(document).keydown(function (event) {  

2、Event属性和方法:

                         if (event.keyCode == “13”) {  
 //按下回车键时

  1. type:事件的类型,如onlick中的click;

  2. srcElement/target:事件源,就是发生事件的元素;

                                alert(“确认要提交么?”);

3.
button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中
0代表左键,1代表中间键,2代表右键)

                           }

  1. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是
    0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
    document.body.scrollLeft和
    document.body.scrollTop)

  2. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置

  3. x,y/pageX,pageY:检索相对于父元素鼠标水平坐标的整数;

  4. altKey,ctrlKey,shiftKey等:返回一个布尔值;

  5. keyCode:返回keydown和keyup事件发生的时候按键的代码,以及keypress
    事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代
    )

      });

9.
fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;

●浏览器事件:在浏览网页时,大家经常会调整浏览器窗口的大小。这些都是通过jQuery中的resize()方法触发resize事件,进而处理相关的函数,来完成页面的一些特效。

  1. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble
    = true; 相当于 e.stopPropagation();)

         语法:

11.
returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue
= false; 相当于 e.preventDefault();)

      $(selector).resize();

12.
attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定
DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在
attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;

3、 绑定事件与移除事件:

IE:obj.attachEvent(事件名称,事件函数);

●绑定事件:在jQuery中,如果需要为匹配的元素同时绑定一个或多个事件,则可以使用bind()方法。

       
1、没有捕获;

           语法:

       
2、事件名称有on

        bind(type,[data],fn);             

       
3、函数执行的顺序:标准IE–正序,非标准IE–倒序;

参数类型

参数含义

描述

type

事件类型

主要包扩click、mouseover等基础事件,还可以自定义事件

[data]

可选参数

作为even.data属性值传递给事件对象的额外数据对象,可选项

fn

处理函数

用来绑定处理函数

标准:obj.addEventListener(事件名称,事件函数,是否捕获);

               
  ★除了bind()方法之外,还有on()、live()和one()等事件绑定方法;

       
1、有捕获

      ★上面这种已经过时,建议使用on: On(type,[data],fn);

       
 2、事件名称没有on

◆绑定单个事件:

       
3、事件执行的顺序是正序的;

             Eg:使用绑定实现鼠标移至“我的当当”显示二级菜单

       4、this
触发该事件的对象;

                 $(document).ready(function(){

//是否捕获?:默认是false

          $(“.on”).bind(“mouseover”,function(){

 false:冒泡

                          $(“.topDown”).show();

var dv1=document.getElementById(“d1”);

          });

dv1.addEventListener(“click”,function(){alert(1);},false);/*告诉div1,如果有一个出去的事件触发了你,你就去执行函数体,alert(1);*/

        });

 true:捕获

         效果:

 dv1.addEventListener(“click”,function(){alert(3);},true);/\告诉div1,如果有一个进来的事件触发了你,你就去执行函数体,alert(3);*/*

         
  www.301.net 8

 

◆绑定多个事件:

事件的取消:

Eg:使用绑定多个事件实现“我的当当” 二级菜单的显示和隐藏

* *

 $(“.top-m .on”).bind({

(1)、普通绑定方式:

      mouseover:function(){   //为mouseover绑定方法

function fn1(){alert(1);}     function fn2(){alert(1);}

            $(“.topDown”).show();

document.onClick=fn1;—–>取消事件绑定:document.Onclick=null;

    },

(2) 、attachEvent(事件名称,事件函数) 绑定方式:

    mouseout:function(){    //为mouseout绑定方法

document.attachEvent(“onclick”,fn1);document.attachEvent(“onclick”,fn2);—–>取消事件绑定:document.detachEvent(“onclick”,fn1);

           $(“.topDown”).hide();

(3)、addEventListener(事件名称,事件函数,是否捕获);

    }

document.addEventListener(“click”,fn1,flase);document.addEventListener(“click”,fn1,true);document.addEventListener(“click”,fn2,flase);

});

—–>取消事件绑定:document.removeEventListener(“click”,fn1,false);

●移除事件:当事件执行完了,需要把绑定的事件通过一定的方法取消。在jQuery中提供了移除事件的方法,同样可以移除单个或多个事件,可以使用unbind()方法。

        

    语法:

  1. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;

      unbind([type],[fn])   

一些说明:

          //type:事件类型,主要包括:blur、focus、click、mouseout等基础事件,此外,还可以是自定义事件;

1. 
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;

          //fn:处理函数,用来解除绑定的处理函数;

2.  event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。
在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是
window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。

          //
Undind()方法有两个参数,这两个参数不是必须的。当unbind()不带参数时,表示移除所绑定的全部事件。

3.  下面两句效果相同
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var evt = evt || window.event;
// firefox下window.event为null, IE下event为null

4、 复合事件:

4.  IE中事件的起泡
IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如,
div 标签包含了 a
,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行标签
a 的onclick事件处理函数,再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后,不希望执行上层的
div
的onclick的事件处理函数了,那么就把cancelBubble设置为true即可。

●在jQuery中有两个复合事件方法-hover()和toggle(),这两个方法与ready()类似,都是jQuery自定义的方法。

●hover()方法:在jQuery中,hover()方法用于模拟鼠标移入和移出事件。

  当鼠标移入时,会触发指定的第一个函数(enter);

  当鼠标移除这个函数时,会触发指定的第二个函数(leave),

  该方法相当于mouseenter和mouseleave事件的组合。

              语法:

      hover(enter,leave);

                  eg:$(".top-m .on").hover(function(){

                                 $(".topDown").show();

                           },

                            function(){

                               $(".topDown").hide();

                       }

      );

●toggle()方法:在jQuery中,toggle()方法分为带参数和不带参数。

  ◆带参数的方法用于模拟鼠标连续click事件。第一次单击元素,触发指定的第一个函数,再次单击则触发指定的第二个函数,如果有更多函数,则依次触发,直到最后一个。随后的单击都重复对几个函数的轮番调用。

    语法:

      toggle(fn1,fn2…..fnN);

  eg:$("input").toggle(

          function(){$("body").css("background","#ff0000");},

          function(){$("body").css("background","#00ff00");},

          function(){$("body").css("background","#0000ff");}

        )

  ◆toggle()不带参数时,与show()和hide()方法的作用一样,切换元素的可见状态。如果是可见的,则切换为隐藏状态;如果是隐藏的,则切换为可见状态。

            语法:

      toggle();

     eg:$("input").click(function(){

        $("p").toggle();

      })

  ◆与jQuery中的toggle()方法一样,toggleClass()可以对样式进行切换,实现事件触发时某元素在“加载某个事件”和“移除某个事件”之间切换。

                语法:

      toggleClass(className);

    eg:$("input").click(function(){

        $("p").toggleClass("red");

      })

 ●toggle( )和toggleClass( )总结

    1、 toggle( fn1,fn2…)实现单击事件的切换,无须额外绑定click事件

    2、toggle( )实现事件触发对象在显示和隐藏状态之间切换

    3、toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

 

5、 jQuery中的动画:

 

jQuery提供了很多动画效果

         1、 控制元素显示与隐藏

         2、改变元素的透明度

         3、改变元素高度

         4、自定义动画

●控制元素的显示:在jQuery中,可以使用show()方法控制元素的显示,除此之外,它还能定义显示时的效果,如显示速度。

                    语法:

          $(selector).show([speed],[callback]);

参数

描述

speed

可选。规定元素从隐藏到完全可见的速度,默认为“0”

可能值:毫秒(如1000)、slow、normal、fast

在设定速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变高度、宽度,外边界、内边界和透明度;

callback

可选项,show()函数执行完后,要执行的函数

 

●控制元素的隐藏:用法与show()方法类似。

    语法:

       $(selector).hide([speed],[callback]);

●改变元素的透明度:

   1.控制元素淡入:在jQuery中,如果元素是隐藏的,则可以使用fadeIn()方法控制元素淡入,它与show()方法相同,可以定义淡入时的效果,如显示速度

           语法:

        $(selector).fadeIn([speed],[callback]);

参数

描述

speed

可选。规定元素从隐藏到完全可见的速度,默认为“0”

可能值:毫秒(如1000)、slow、normal、fast

在设定速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变透明度,给视觉以淡入的效果;

callback

可选项,fadeIn ()函数执行完后,要执行的函数,除非设置了speed参数,否则不能设置该参数;

    2.控制元素淡出

      语法:

        $(selector).fadeOut([speed],[callback]);

●改变元素的高度:在jQuery中,用于改变元素高度的方法是slideUp()和slideDown()。若元素中的display属性值为none,当调用slideDown()方法时,这个元素会从上向下延伸显示,而slideUp()方法正好相反,元素下到上缩短直至隐藏。

    语法:

      $(selector).slideUp([speed],[callback]);

                  $(selector).slideDown([speed],[callback]);

JQuery中的所有动画效果,都可以设置三种速度参数,即slow、normal、fast(三者对应的时间分别为0.6秒,0.4秒,0.2秒);

当使用关键字作为速度的参数时,需要使用双引号引起来,如:fadeIn(“slow”),

而使用时间数值作为速度参数时,则不需要使用双引号,如:fadeIn(500),需要注意的是,当使用数值作为参数时,单位为毫秒而不是秒;

●自定义动画:在jQuery中,可以创建自定义动画,实现各种比较复杂的动画。

    语法:

      $(selector).animate({params},[speed],[callback]);

                  //params:必选项目,定义形成动画的CSS属性。

                      //speed:可选,规定效果时长,取值:毫秒、fast、slow;

         //callback:选项,滑动完成后执行的函数名称。

6、 事件冒泡:

附加:

●事件冒泡:当一个父元素的子元素有与父元素相同的事件时,那么父元素的事件执行时,子元素的事件也会执行,那么父元素的一次click事件相当于执行了2次。

                             
 www.301.net 9

 ◆阻止冒泡事件

Eg:下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分别将三种元素都注册click事件。

那么,click事件会按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。

<body><div><span>我是****</span></div></body>

$(“span”).bind(“click”, function(){ alert(‘span click’); });

$(“div”).bind(“click”, function(){ alert(‘div click’); });

$(“body”).bind(“click”, function(){ alert(‘body click’); });

解决这个问题的办法是:在SPAN执行完click事件后,停止事件冒泡。

$(“span”).bind(“click”, function(event){

    alert(‘span click’);

    event.stopPropagation(); //停止冒泡

});

js之事件冒泡和事件捕获:

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

(2)捕获型事件(event capturing):事件从最不精确的对象(document
对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

  DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

假设一个元素div,它有一个下级元素p。
<div>
  <p>元素</p>
</div>
这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?
 
两种模型
以前,Netscape和Microsoft是不同的实现方式。

Netscape中,div先触发,这就叫做事件捕获。

Microsoft中,p先触发,这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla, Opera 7 和
Konqueror两种都支持,旧版本的Opera’s 和 iCab两种都不支持 。

事件捕获 当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡 当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

W3C模型 W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener(‘click’,doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式 在一个支持W3C
DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器 如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

ele.attachEvent(“onclick”, doSomething2);

附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。

事件的传播是可以阻止的: • 在W3c中,使用stopPropagation()方法
• 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~
3.阻止事件的默认行为,例如click <a>后的跳转~
• 在W3c中,使用preventDefault()方法;
• 在IE下设置window.event.returnValue = false;

Eg:

<!DOCTYPE html>
<html lang=”en” onclick=”*alert(‘html’)>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width,
initial-scale=1.0″
>
    <meta http-equiv=”X-UA-Compatible”
content=”ie=edge”>
    <script
src=””></script>
    <title>Document</title>
</head>
<body onclick=”
alert(‘body’)> <!–html–>
<div style=”width:400px; height:400px;
background:red”
onclick=”
alert(this.style.background)>
    <div id=”div2″ style=”width:300px;
height:300px; background:palevioletred” >
        <div style=”width:200px; height:200px;
background:yellow”
onclick=”
alert*(this.style.background)>
            <div id=”div1″ style=”width:100px;
height:100px; background:palegreen”>
                <a id=”aaa”
href=””>aaa</a>
            </div>
        </div>
    </div>
</div>

<script>
    //此jquery既阻止默认行为又停止冒泡
   
*// $(“#div1”).on(‘click’,function(){
    //     return false;
    // });

    **window*.onload = function () {
       
var oDiv1 = *document*.getElementById(‘div1’);
       
var oDiv2 = *document*.getElementById(‘div2’**);

        oDiv1.onclick = function (ev){
            var oEvent = ev || event;
            alert(“this is div1”);

            //js阻止事件冒泡
           
*//oEvent.cancelBubble = true;
            //oEvent.stopPropagation();

            //js阻止链接默认行为,没有停止冒泡
            //oEvent.preventDefault();
            //return false;
       * }

        oDiv2.onclick = function (ev){
            var oEvent = ev || event;
            alert(“this is div2”);
            oEvent.cancelBubble = true;
        }
    }
</script>
</body>
</html>

理解:

他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

这是HTML结构

 

<div id=”parent”>

  <div id=”child” class=”child”></div>

</div>

现在我们给它们绑定上事件

           
document.getElementById(“parent”).addEventListener(“click”,function(e){

                alert(“parent事件被触发,”+this.id);

            })

           
document.getElementById(“child”).addEventListener(“click”,function(e){

                alert(“child事件被触发,”+this.id)

            })

结果:

child事件被触发,child

parent事件被触发,parent

结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。

现在改变第三个参数的值为true

       document.getElementById(“parent”).addEventListener(“click”,function(e){

                alert(“parent事件被触发,”+e.target.id);

            },true)

           
document.getElementById(“child”).addEventListener(“click”,function(e){

                alert(“child事件被触发,”+e.target.id)

            },true)

结果:

parent事件被触发,parent

child事件被触发,child

结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。


7、 附加:

●获得焦点是: onFocus ,失去焦点是: onBlur;

●键盘事件中键码是event都系的keyCode属性;

●Event是事件源,可以获取触发事件的相关属性

●mouseenter(); 为鼠标指针进入时

 mouseout();为鼠标指针移除时

 click();为鼠标单击时

●常用键盘事件的方法一共有三种:按下按键时触发的事件:keydown()、释放按键时触发的事件:keyup()、产生可打印的字符时触发的事件:keypress();

●滚动事件:调用方法:window.onscroll;

●onChange改变文本框中的内容的事件;

 www.301.net 10

A选项正确;

B选项错误,不是所有的HTML元素都有获取焦点事件;

C选项正确;

D错误,input,textarea标签元素都能触发blur事件

●trigger (type): 触发被选元素的指定事件类型

  bind(type):为匹配的元素同时绑定一个或者多个事件

 on():最新的Jquery绑定事件只能够使用on();通过on(“事件名称”,function(){})来给指定元素添加事件;

  one(type):
为所选的元素绑定一个仅触发一次的处理函数(one():绑定一次的话还可以用one()方法)

  :not(selector)选取去除所有与给定选择器匹配的元素

  unbind():是移除事件,从匹配元素移除一个被添加的事件处理器

  add() 方法将元素添加到匹配元素的集合中;

  live()
方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
通过
live()
方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)(该方法一般用于为动态添加的事件绑定元素)**

 www.301.net 11

A选项中text()方法只能插入文本内容;

C选项错误,replace()方法会替换掉div 标签;

D选项错误,jQuery对象不能直接使用DOM对象的方法或属性。

●slideUp、slideDown是改变元素高度;

   fadeIn、fadeOut是改变元素透明度;

   fadeIn不能改变宽度,但是能改变长度;与fadeIn相对的是fadeOut;

●onblur是失去焦点的事件

  focus是获得焦点方法 

  blur是失去焦点的方法

www.301.net 12

 www.301.net 13

●click(fn):当点击元素时,会发生 click
事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次
click。

  click() 函数触发 click 事件。或者如果设置了 function
参数,则该函数规定当发生 click 事件时执行的代码。

●hover(over,out):用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,触发指定的第一个函数,

  当鼠标指针移出这个元素时,会触发第二个函数,该方法相当于mouseover和mouseout事件的组合。

  ★复合事件hover(),其可以同时控制鼠标移过和移出两种事件及其响应函数

●keypress(fn):keypress() 函数触发 keypress 事件。或者如果设置了
function 参数,则规定当发生 keypress 事件时执行的代码。

●select(fn):当textarea或文本类型的input元素中的文本被选择时,会发生select事件。

●toggel()事件用于模拟鼠标连续click事件,第一次单击,触发第一个函数(fn1),依次类推,最后一个调用调用完后,从头开始轮番调用

●slideDown()方法是将元素从上向下延伸显示;

●fadeIn()是通过不透明度的变化来实现所有匹配元素的淡入效果(显示)。

●元素的显示和隐藏可以通过jquery对象的show()和hide()方法来实现,也可以通过操作dom对象的display样式表属性来实现。

  通过css()设置元素的display状态block可使隐藏的元素显示,通过css()设置元素的display状态为none可使元素隐藏,

  使用jquery提供的隐藏方法hide()进行隐藏,使用show()方法使隐藏元素显示

  ★Show()方法,参数speed的值可以是毫秒,也可以是slow:(600毫秒),normal,fast

●显示一个元素的方法,可以用show(),  slideDown() ,fadeIn() ,等方法;

  隐藏一个元素的方法,可以用hide()、slideUp()、dadeOut()等方法;

●slideDown([speed],[easing],[fn])
通过高度变化(向下增大(控制元素从上向下延伸))来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数.

  slideUp([speed,[easing],[fn]])
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数;

●fadeOut([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果(可使元素高度逐渐减少,直至为0最后元素隐藏),并在动画完成后可选地触发一个回调函数

  fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数

 
fadeIn(speed,easing,callback)分别代表褪色效果的速度,规定在动画的不同点上元素的速度,执行淡入效果后要调用的函数。三个参数都是可选, 使用关键字作为速度参数时,需要使用双引号引起来,

                                                              如fadeIn(“slow”);而使用时间数值作为速度参数时,则不需要双引号,如fadeIn(500);

●fadeToggle()函数的能实现元素的现实与隐藏切换。

 www.301.net 14

www.301.net 15

 www.301.net 16

 

A是必选,

C是可选

●在jQuery中,最基础的实现动画的方法是animate(),animate() 方法通过使用
CSS 样式,把元素从一种状态改变为另一种状态。

●animate() 方法执行 CSS
属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

      只有数字值可创建动画(比如
“margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)。

**       语法:$(selector).animate(styles,speed,easing,callback)  
//其中,speed的单位是毫秒**

        注:使用 “+=” 或 “-=” 来创建相对动画(relative
animations)。

           eg:

            www.301.net 17

        

●fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

  语法:$(selector).fadeTo(speed,opacity,callback)  

    //参数speed
可选。规定元素从当前透明度到指定透明度的速度。可能的值:毫秒、slow、normal、fast

    //参数opacity必需。规定要淡入或淡出的透明度。必须是介于 0.00
与 1.00 之间的数字。

    //参数callback可选。fadeTo
函数执行完之后,要执行的函数。除非设置了 speed
参数,否则不能设置该参数。

 

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注