JS 事件学习笔记

页面导航:首页 > 网络编程 > JavaScript > JS 事件学习笔记

JS 事件学习笔记

来源: 作者: 时间:2016-01-23 10:23 【

事件流如果说某个元素有祖先元素,其祖先元素和它都定义了相同的事件,那么在该元素上发生某个事件的时候,涉及到事件在该元素和祖先元素间的传递顺序问题。 分为两种: 事件冒

事件流

如果说某个元素有祖先元素,其祖先元素和它都定义了相同的事件,那么在该元素上发生某个事件的时候,涉及到事件在该元素和祖先元素间的传递顺序问题。
分为两种:
事件冒泡:从最具体的元素开始接收,执行事件处理程序,然后把该事件往上传递一直到document对象。
如果在某个元素上触发了某个事件,则会调用其事件处理程序,若该元素没有定义事件处理程序或者事件返回true,则会交由父级对象处理,从里到外,所有父级对象的同类事件都会被激活。一直上传到document对象为止。
事件捕获:相反,从最外层的document先捕获再依次往最具体的元素传递。即内部元素中触发了某个事件后,先由外部元素”截获“该事件,并执行自己绑定的事件处理程序。再将该事件向下传递给内部元素。
通常都使用事件冒泡。

DOM2级事件流

分为三个阶段:捕获阶段、处于目标阶段(实际目标接收到事件)、事件冒泡阶段(在该阶段让具体目标对事件作出响应)。也就是说事件首先从document往下传递,一直到目标对象,然后再以起泡方式往上传递到document。但是包含元素具体在哪个阶段执行事件处理程序是由添加事件的函数的参数来设置的。也就是说父元素一定是先接收到事件的,但是不一定在截获的时候就执行。
多数支持dom事件流的都遵循规定:在捕获阶段不涉及事件目标,但chrome、Firefox、IE9等浏览器可在捕获阶段触发事件对象上的事件,结果就是有两个机会(阶段)在目标对象上操作事件。

事件处理程序

html事件处理程序

即相应某个事件的函数,以”on“开头。事件处理程序中的代码在执行时有权访问全局作用域中的任何代码。
函数中有一个不用自定义的局部变量even,即事件对象;函数中的this指向事件的目标元素。
扩展作用域:with语句
该方式的缺点p-350

Script指定事件处理程序

1. DOM0级事件处理程序

该方式让js代码和紧密耦合。应使用指定事件处理程序:将函数赋值给要操作对象的事件处理程序属性。如btn.onclick=function(){}。
注意:在JS代码运行到绑定事件前不会指定任何事件处理程序,因此若这些代码在页面中位于按钮的后面则可能在一段时间内点击按钮没有反应。
该方式指定的事件处理程序被认为是元素的方法,是在元素的作用域中运行,this引用当前元素。以该方式指定,会在事件流的冒泡阶段被处理。
删除绑定的事件:btn.onclick=null

2 . DOM2级事件处理程序
为DOM结点规定了方法addEventListener()和removeEventListener()用于设置和删除事件处理程序,这两个方法都包含三个参数:

参数一:指定事件名称 参数二:指定事件处理程序 参数三:布尔值,true表示接收该事件的对象在事件捕获阶段就调用事件处理程序,false表示接收到该事件的对象要等到在冒泡阶段才调用。例如:
//html代码
I am outside
I am inside
//js代码 window.onload=function(){ var outside = document.getElementById("outside"); outside.addEventListener("click",function(){alert("I am outside")},true);//在捕获阶段就调用 var inside = document.getElementById("inside"); inside.addEventListener("click",function(){alert("I am inside")},true); }

如上面的代码,外面的盒子outside的事件处理程序设置为true,则是在捕获阶段如果截获到该事件了,就立即调用其事件处理程序,也就是说如果点击了内部盒子,则输出顺序为”I am outside”,”I am inside“。
若将外部盒子的true改为false,意思是在冒泡阶段才调用处理程序,则点击内部盒子后,输出顺序为”I am inside“,”I am outside”。

该方式仍是在所依附的元素的作用域中进行。该方式的优点是可以添加多个事件(包括同名的不会被覆盖),按照添加的先后顺序执行。
注意:removeEventListener()的参数和addEventListener的相同,但是匿名函数无法移除,也就是说事件根本没有解除绑定,仍然点击有效。实际上这个函数与传入addEventListener中的匿名函数完全是两个,可通过传入持有匿名函数引用的变量来解决:

<script type="text/javascript">
window.onload=function(){
    var btn = document.getElementById("show");
    var handler = function(){alert(this.value)};
    btn.addEventListener("click",handler,false);
    btn.removeEventListener("click",handler,false);
}
</script>

为了最大限度兼容各种浏览器,最好将事件处理程序添加到事件流的冒泡阶段,只在需要在事件达到目标之前截获它的时候将事件处理程序添加到捕获阶段。

禁止事件冒泡:

先说几个相关的方法和属性:

cancelBubble(HTML DOM Event对象的属性):如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。 stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。 preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。

可将阻止事件冒泡的程序写成下列函数:

function stopBubble(e){
    if(e && e.stopPropagation){
        e.stopPropagation();
    }else{
        window.even.cancelBubble=true;
    }
}

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<