js事件总结之概述续

最新推荐文章于 2020-07-13 18:28:18 发布

qq_29319817

最新推荐文章于 2020-07-13 18:28:18 发布

阅读量373

点赞数

分类专栏：前端蜗牛爬行记 js 文章标签： js事件事件事件流

本文链接：https://blog.csdn.net/qq_29319817/article/details/60462742

版权

前端蜗牛爬行记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

注册事件处理程序

两种基本方式：

1：基本事件处理：这种方式出现在web初期，給事件目标对象或文档元素设置属性。

2：高级事件处理：这种方式更新且通用，是将事件处理程序传递对象或元素的一种方法。

设置javascript对象属性为事件处理程序

注册事件处理程序最简单的方式就是通过设置事件目标的属性为所需事件处理程序函数。

eg.

window.οnlοad=function(){
    var ert=document.getElementById("shipping_address");
    elt.οnsubmit=function(){
    return validata(this);
};
}

其方式有个缺点：就是它的设计都是围绕着假设每个事件目标对于每种事件类型将最多只有一个处理程序，若同一个对象注册同一事件类型的多个处理程序函数，则后者的处理函数会覆盖前者。tips：addEventListener()方法可解决这个弊端，详情阅下。

设置HTML元素属性为事件处理程序

用于设置文档元素事件处理程序属性（property）也能换成对应的HTML标签的属性。

eg.

<button οnclick="alert('thank you')" type="button">点我这里</button>

当指定一串js代码作为html事件处理程序属性的值时，浏览器会把代码串转化为类似下面的函数中：

function(event){
    with(document){
        with(this.form ''{}){
        with(this){
            /*这里代码*/
}
}
}
}

addEventListener()

使用addEventListener()方法可以为事件目标注册事件处理程序。其中方法接受3个参数，分别为：事件类型、处理函数、是否为捕获。

eg.

<button id="mybtn">点我这里</button>
<script>
    var btn=document.getElementById("mybtn");
    btn.οnclick=function(){alert("thank you clicking me!");};
    btn.addEventListener("click",function(){alert("thanks again");},false);
</script>

若想移除该事件对象上注册的事件处理函数，以节省系统资源，则可用removeEventListener()方法来销毁事件。它同样有三个参数。tips：第一，三个参数定要保持一致。也就是说如果使用addEventListener()方法将事件处理程序绑定在捕获阶段，则必须在removeEventListener()方法指明捕获阶段，只有这样才能销毁删除事件处理函数。如果绑定在捕获阶段的事件处理程序，却在冒泡阶段来删除它，虽然这样做不会引起bug，但是这样销毁操作是无效的。

attachEvent()

由于ie9及之前版本的浏览器不支持addEventListener()方法，但阔以用attachEvent（）方法代替。因为ie不支持捕获的事件传播模型，故attachEvent（）方法只有俩个参数，其中分别为：事件类型、事件处理函数。其中移除该注册处理程序，可用detachEvent（）方法。

eg.

var btn=document.getElementById("mybtn");
var handler=function(){alert("thanks clicking me!");};
if(btn.addEventListener)
    btn.addEventListener("click",handler,false);
else if(btn.attachEvent)
    btn.attachEvent("click",handler);

事件流

Event对象

当触发事件时，浏览器会自动创建一个Event对象，Event对象实际上是Event类型实例，默认状态下会被作为参数传递给事件处理函数。ie浏览器把Event视为独立的对象，通过window对象的event属性进行访问。为了兼容ie与非ie浏览器共享event对象，则阔以使用如下代码兼容：

var event=event ||window.event;

事件传播

在dom2级事件模型中，一点事件被触发，事件流首先从dom树的顶端向下传播直到目标节点，然后再从目标节点向上传播到dom树的顶端。从上到下，为捕获阶段。相反为，冒泡阶段。如下可证明：

eg.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
window.οnlοad=function(){
    var btn=document.getElementsByTagName("input")[0];
    var p=document.getElementsByTagName("p")[0];
    var i=0;
    do{
        btn.addEventListener("click",function(){
            p.innerHTML += "<br/>("+ i++ +")" +this.nodeName;
},true);
        btn=btn.parent;
}while(btn);
}
</script>
</head>
<body>
    <input type="button" value="event对象"/>
<p>捕获型事件流传播过程：</p>

</body>
</html>