xml地图|网站地图|网站标签 [设为首页] [加入收藏]

JavaScript知识总结,事件处理

来源:http://www.ccidsi.com 作者:集成经验 人气:180 发布时间:2020-01-06
摘要:事件管理的三种艺术 在js的事件管理中定义了很各个风浪,事件名称是指现实的某种动作,举例click、load、mouseover等都以事件的名称。而 响应某些事件的 函数叫事件处理程序,事件管

事件管理的三种艺术

在js的事件管理中定义了很各个风浪,事件名称是指现实的某种动作,举例click、load、mouseover等都以事件的名称。而响应某些事件的函数叫事件处理程序,事件管理程序的名字是以on起首的,由此click事件的事件处理程序正是onclick,load事件的事件处理程序就是onload。

事件指标

在触发 DOM 上的某些事件时,会爆发二个事变指标event,那些指标中含有着富有与事件有关的新闻。包含招致事件的成分、事件的品类以至此外与一定事件有关的音信。譬如,鼠标操作诱致的风云目的中,会蕴藏鼠标地方的音讯,而键盘操作招致的事件目的中,会含有与按下的键有关的新闻。全体浏览器都援助event 对象,但支撑格局各异。

  • 跨浏览器的风浪指标*
    纵然如此 DOM 和 IE 中的 event 对象不一致,但根据它们之间的雷同性照旧能够拿出跨浏览器的方案来。IE中 event 对象的全部音讯和措施 DOM 对象中都有,只可是完成方式不相近。可是,这种对应关系让落实三种事件模型之间的照射极度轻松。能够对后边介绍的 伊芙ntUtil 对象加以加强,增加如下方法以求同存异。
var EventUtil = {
    addHandler: function(element, type, handler){
        // 省略的代码
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    removeHandler: function(element, type, handler){
        // 省略的代码
    },
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

点击two,试行结果:one   two,bubble   two,capture

IE事件管理程序

IE中独立达成了与DOM2级事件管理中近乎的四个办法:attach伊夫nt和detach伊夫nt(卡塔尔。那多个点子选用四个参数:事件管理程序名称和事件管理函数。因为IE8及更早版本只扶植事件冒泡,所以通过这种格局丰盛的事件管理程序都会被增多在事件冒泡阶段。

var btn = document.getElementById(button);
btn.attachEvent(onclick, function(){ //注意是onclick
    alert(first);
});

IE事件处理同在此以前的任何情势有三个区分,首先,IE的事件管理程序会在大局情形下运作。
那意味在中间使用this会等于window。

var btn = document.getElementById(button);
btn.attachEvent(onclick, function(){
    alert(this === window);  //true
});

第二,数次增多的事件管理函数按增添的反倒顺序实行,比如

var btn = document.getElementById(button);
btn.attachEvent(onclick, function(){
    alert(first);
});
btn.attachEvent(onclick, function(){
    alert(second);
});

当按下按键时,将先输出second,然后才输出first。
要移除事件的法子同DOM2级相近,调用detach伊夫nt然后传如形似参数就可以。

事件管理程序

  • HTML事件管理程序
    有个别成分协助的每一种事件,都足以运用五个与相应事件管理程序同名的 HTML 天性来钦赐。这些性格的值应该是能够推行的 JavaScript 代码。举个例子,要在按键被单击时实行一些 JavaScript,能够像下边那样编写代码:
<input type="button" value="Click Me" onclick="console.log('Clicked')" />

缺点:
(1)首先,存在贰个时差难点。因为顾客大概会在 HTML 成分大器晚成出未来页面上就接触相应的风云,但即刻的事件管理程序有希望尚不具有实行尺度。今后面包车型大巴事例来表达,借使showMessage(卡塔尔 函数是在开关下方、页面包车型大巴最尾部定义的。如若顾客在页面解析showMessage(State of Qatar函数在此之前就单击了开关,就能够引发错误。为此,非常多HTML事件处理程序都会被封装在三个try-catch 块中,以便错误不会浮出水面,如下面包车型客车事例所示:

<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}">

那样,假使在 showMessage(卡塔尔(قطر‎ 函数有定义在此以前单击了按键,客户将不会见到JavaScript 错误,因为在浏览器有空子管理错误在此以前,错误就被抓获了。
(2)这样扩大事件管理程序的功效域链在不相同浏览器中会引致不一致结果。不一致JavaScript 引擎遵从的标记符深入解析法规略有差别,很只怕会在访谈非节制对象成员时出错。
(3)HTML 与 JavaScript 代码紧凑耦合。假使要转移事件处理程序,就要改革几个地点:HTML 代码和 JavaScript 代码。而那就是大多开辟职员丢弃 HTML 事件管理程序,转而接收JavaScript 钦赐事件管理程序的缘由所在。

  • DOM0级事件管理程序
    经过 JavaScript 钦定事件管理程序的历史观艺术,正是将一个函数赋值给三个事件管理程序属性。这种为事件管理程序赋值的秘技是在第四代Web浏览器中现身的,而且至今截至仍然是保有今世浏览器所支持。原因一是大致,二是有所跨浏览器的优势。要使用 JavaScript 钦命事件管理程序,首先必得获得一个要操作的目的的引用。
    各样成分(富含 window 和 document)都有友好的事件管理程序属性,那些属性常常一切大写,比如onclick。将这种性质的值设置为一个函数,就可以内定事件处理程序,如下所示:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
    console.log("Clicked");
};

在那,我们通过文书档案对象获得了二个开关的引用,然后为它钦定了 onclick 事件管理程序。但要注意,在此些代码运转从前不会指定事件处理程序,由此风流洒脱旦这么些代码在页面中位居按键后边,就有希望在乎气风发段时间内怎么单击都未曾影响。

动用 DOM1 级方法内定的事件管理程序被感觉是因素的点子。由此,那时的事件管理程序是在要素的效能域中运作;换句话说,程序中的 this 援引当前因素。来看一个事例。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    console.log(this.id);    // "myBtn"
};

也得以去除通过 DOM1 级方法钦点的事件管理程序,只要像下边这样将事件管理程序属性的值设置为 null 就能够:

btn.onclick = null;     // 删除事件处理程序
  • DOM2级事件管理程序
    DOM2 级事件定义了多个办法,用于拍卖钦定和删除事件处理程序的操作:add伊芙ntListener()和 removeEventListener(卡塔尔(قطر‎。全体 DOM 节点中都含有那多少个主意,况且它们都担当3个参数:要管理的事件名、作为事件管理程序的函数和多少个布尔值。最终那个布尔值参数借使是 true,表示在抓获阶段调用事件管理程序;若是是 false,表示在冒泡阶段调用事件管理程序。
    要在开关上为 click 事件增多事件管理程序,能够行使下列代码:
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    console.log(this.id);
}, false);

上面包车型地铁代码为三个开关增多了 onclick 事件管理程序,并且该事件会在冒泡阶段被触发(因为最终八个参数是 false)。与 DOM1 级方法后生可畏致,这里丰裕的事件管理程序也是在其直属的要素的功效域中运作。使用 DOM2 级方法增多事件管理程序的基本点受益是可以增进七个事件管理程序。来看下边包车型大巴例子。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
    console.log(this.id);
}, false);
btn.addEventListener("click", function(){
    console.log("Hello world!");
}, false);

在此个事例中,大家运用 add伊夫ntListener(卡塔尔(قطر‎增多了贰个事件管理程序。纵然调用 removeEventListener(卡塔尔(قطر‎时看似使用了千篇风流罗曼蒂克律的参数,但实际,第2个参数与传播 add伊夫ntListener(State of Qatar中的那多少个是完全不一致的函数。而流传 remove伊芙ntListener(卡塔尔国中的事件管理程序函数必须与传 入add伊芙ntListener(卡塔尔国中的相符,如上边包车型客车例证所示。

var btn = document.getElementById("myBtn");
var handler = function(){
    console.log(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); // 有效!

重写后的那几个事例没格外,是因为在 add伊芙ntListener(State of Qatar 和 remove伊芙ntListener(卡塔尔(قطر‎ 中行使了雷同的函数。
超级多景色下,都以将事件管理程序增加到事件流的冒泡阶段,那样能够最大限度地包容各个浏览器。最棒只在必要在事件达到指标以前截获它的时候将事件管理程序增添到捕获阶段。借使不是特意须求,我们不建议在事变捕获阶段注册事件管理程序。

  • IE事件管理程序
    IE 达成了与 DOM 中好像的三个章程:attach伊夫nt(卡塔尔(قطر‎ 和 detach伊夫nt(卡塔尔。那多少个措施接收平等的七个参数:事件管理程序名称与事件管理程序函数。由于 IE8 及更早版本只协助事件冒泡,所以通过 attachEvent(卡塔尔(قطر‎增添的事件管理程序都会被增加到冒泡阶段。
    要采用 attachEvent(卡塔尔(قطر‎ 为按键增加多少个事件管理程序,能够运用以下代码。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    console.log("Clicked");
});

只顾,attachEvent(卡塔尔国 的率先个参数是 "onclick",而非 DOM 的 add伊夫ntListener(卡塔尔 方法中的 "click"。
在 IE 中动用 attachEvent(卡塔尔 与应用 DOM1 级方法的关键分裂在于事件管理程序的功用域。在使用 DOM1 级方法的景况下,事件管理程序会在其所属成分的功效域内运维;在利用 attach伊芙nt(卡塔尔(قطر‎ 方法的情事下,事件管理程序会在全局成效域中运转,由此 this 等于 window。来看下边包车型客车例证。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
    console.log(this === window);    // true
});

在编写跨浏览器的代码时,深深记住那生机勃勃界别相当重大。
与 add伊芙ntListener(卡塔尔国 肖似,attachEvent(卡塔尔方法也能够用来为叁个因素增加多少个事件管理程序。然则,与 DOM 方法分歧的是,这么些事件管理程序不是以拉长它们的顺序实践,而是以相反的相继被触发。

应用 attach伊芙nt(卡塔尔国 加多的风云能够经过 detachEvent()来移除,条件是必得提供平等的参数。与 DOM 方法风姿洒脱致,那也意味加上的无名氏函数将不可能被移除。然而,只要能够将对相似函数的援用传给 detach伊芙nt(卡塔尔国,就足以移除相应的事件管理程序。

  • 跨浏览器的事件管理程序
    为了以跨浏览器的主意处总管件,不菲开垦人士会选拔能够隔断浏览器差距的 JavaScript 库,还也是有大器晚成对开荒人士会融洽付出最合适的事件管理的措施。本身编辑代码其实也不难,只要恰本地使用力量检验就能够。要保管处监护人件的代码能在大多浏览器下相符地运行,只需关心冒泡阶段。
var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on"   type, handler);
        } else {
            element["on"   type] = handler;
        }
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on"   type, handler);
        } else {
            element["on"   type] = null;
        }
    }
};

那七个方法首先都会检验传入的要素中是或不是留存 DOM2 级方法。若是存在 DOM2 级方法,则使用该办法:传入事件类型、事件管理程序函数和第八个参数 false(表示冒泡阶段)。即使存在的是 IE 的办法,则运用第二种方案。注意,为了在 IE8 及更早版本中运作,那个时候的风浪类型必需抬高 "on" 前缀。最终大器晚成种也许正是使用 DOM1 级方法(在现代浏览器中,应该不会实行这里的代码)。那时,大家接纳的是方括号语法来将属性名钦定为事件管理程序,或许将品质设置为 null。

可以像上面那样使用 EventUtil 对象:

var btn = document.getElementById("myBtn");
var handler = function(){
    console.log("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
EventUtil.removeHandler(btn, "click", handler);

addHandler(卡塔尔国 和 removeHandler(卡塔尔国 未有伪造到独具的浏览器难题,比方在 IE 中的效用域难点。可是,使用它们拉长和移除事件处理程序依然丰富了。

$('#ul1 a').on('click', function(){
    alert('正在监听');
});
//改为
$('#ul2').on('click', 'a', function(){
    alert('正在监听');
});

DOM0级管理程序

第三种方法是在js中为要素绑定事件,通过在js中得到成分,然后给其钦命事件:

var btn = document.getElementById(button);
btn.onclick = function(){
    alert(this.id);
}

透过DOM0级方法钦定的次序被感到是因素的法子,所以上述代码推行后,按下成分弹出的将是按键的id,能够经过this获取该因素全数的性质和艺术。
内需删除通过DOM0级方法内定的事件管理程序,只需将该属性值设为null就可以:

btn.onclick = null;

亟待留意的是透过这种格局不能为因素加多重复事件,多次为onclick赋值只有最后叁个是实用的,比如

btn.onclick = function(){
    alert(first);
}
btn.onclick = function(){
    alert(second);
}

最后单击按键的时候只会输出second。

事件流

事件流描述的是从页面中接到事件的依次。但有意思的是,IE 和 Netscape 开拓公司如故建议了差不离是全然相反的事件流的定义。IE 的风浪流是事件冒泡流,而 Netscape Communicator 的风浪流是事件捕获流。

  • 事件冒泡
    IE 的轩然大波流叫做事件冒泡(event bubbling),即事件开端时由最实际的要素(文书档案中嵌套等级次序最深的可怜节点)接收,然后逐级升高传播到相比不现实的节点(文书档案)。以上边包车型客车HTML页面为例:
<!DOCTYPE html>
<html>
<head>
    <title>Event Bubbling Example</title>
</head>
<body>
    <div id="myDiv">Click Me</div>
</body>
</html>

//借使您单击了页面中的 <div> 成分,那么这么些 click 事件会依据如下顺序传播:
div=>body=>html=>document。约等于说,click 事件首先在 <div> 成分上发生,而以此成分正是大家单击的要素。然后,click 事件沿 DOM 树向上传播,在每一流节点上都会生出,直至传播到 document 对象。下图展现了风云冒泡的进度:

图片 1

事件冒泡.jpg

鉴于老版本的浏览器不扶持,因而很稀有人使用事件捕获。我们也提出大家放心地接纳事件冒泡,在有例外部须要要时再使用事件捕获。

  • 事件捕获
    Netscape Communicator 团队提议的另风度翩翩种事件流叫做事件捕获(event capturing)。事件捕获的寻思是不太现实的节点应该更早选取到事件,而最实际的节点应该最终收到到事件。事件捕获的意向在于在事变到达约定目的在此之前捕获它。借使仍早前边的 HTML 页面作为示范事件捕获的事例,那么单击 <div> 元素就能以下列顺序触发 click 事件:
    document=>html=>body=>div。在事件捕获进度中,document 对象首先接收到 click 事件,然后事件沿 DOM 树依次向下,一向流电传到事件的骨子里目的,即 <div> 成分。下图呈现了平地风波捕获的经过:

    图片 2

    事件捕获.jpg

由于老版本的浏览器不支持,因此很少有人使用事件捕获。我们也建议大家放心地使用事件冒泡,在有特殊需要时再使用事件捕获。
  • DOM事件流
    “DOM2级事件”规定的风云流满含多少个阶段:事件捕获阶段、处于指标阶段和事件冒泡阶段。首首发送的是事件捕获,为缴获事件提供了空子。然后是实在的对象选取到事件。最后贰个品级是冒泡阶段,能够在这里个品级对事件做出响应。下图显示了事件流的历程:

    图片 3

    事件流.jpg

**注:**  
1.实际目标捕获事件被归为了事件冒泡阶段。  
2.多数支持 DOM 事件流的浏览器都实现了一种特定的行为:即使“DOM2
级事件”规范明确要求捕获阶段不会涉及事件目标,但高版本浏览器都会在捕获阶段触发事件对象上的事件。结果,就是有两个机会再目标对象上面操作事件。

type        String  只读  被触发的平地风波的品类

编排跨浏览器的事件管理程序

地点提到IE和另外浏览器在处监护人件上或然存在部分异样的,能够编制三个伊芙ntUtil对象,来将增加事件和移除事件封装起来。
金玉锦绣方式是先判断是或不是扶持DOM2级管理,假使不协助使用IE方法,要是都不支持最终选用DOM0级方法。

var EventUtil = {
    //添加事件
    addHandler: function(element, type, handler){
        if(element.addEventListener){
            //支持DOM2级
            element.addEventListener(type, element, handler);
        }else if(element.attachEvent){
            //IE事件处理,注意on前缀
            element.attachEvent(on   type, handler);
        }else{
            //DOM0级
            element[on   type] = handler;
        }
    },
    //移除事件
    removeHandler: function(){
        if(element.removeEventListener){
            //支持DOM2级
            element.removeEventListener(type, element, handler);
        }else if(element.detachEvent){
            //IE事件处理,注意on前缀
            element.detachEvent(on   type, handler);
        }else{
            //DOM0级
            element[on   type] = null;
        }
    }
}

 

事件处理【写在前方】近日径直在看js的底工,究竟jquery即使好用,总归是用着人家写的,只会用api比不上搞精通完成的准则。等把...

问题

事件流

事件流描述的是从页面中吸取事件的风度翩翩意气风发。js中有二种事件流,冒泡流和捕获流。三种流的名号都很形象,在由节点构成的少年老成颗html树上边,冒泡流指事件早先时候由最现实的成分最先选取,然后逐级传播到最不现实的节点,比如在如下文书档案中:

 

当单击div时,事件首先在div上响应,然后传入body成分上,然后传入html成分上,最后传到document对象。
捕获流恰好相反,最初响应的是document对象,然后沿dom树依次向下,到html,到body,最终到实际指标,相当于div。
老版浏览器并不扶助捕获流,冒泡流也十二分契合大家对事件传播的掌握,由此大家更多应用的是冒泡流。

关于那么些动态创立的函数,另三个有意思的地点是它扩张成效域的秘诀。在此个函数内部,能够像访问些变量相仿访谈document以至该因素本人的分子。这一个函数使用with想下边那样扩充功用域:

标签内绑定

通过设置标签的习性可感觉节点十分福利地绑定事件,如:

也足以调用其余地点定义的台本:

<script>
    function showMessage(){
        alert(按钮按下);
    }
</script>
...

采取直接绑定有五个特别的地点,以此是会创设一个封装成分属性的函数,那几个函数中有三个片段变量event,也便是事件目的:

事件发生时,event对象活动传送到showMessage函数中,通过这些指标大家能够访谈到事件目的的相当多属性。其余在事件处理程序内部,this指代风浪的靶子成分,举个例子

除此以外当当前因素是二个表单元素时,则作用域中还或然会含有表单成分的进口,也便是说在事件管理程序中能够访谈其余表单成分,比如

这么能够一直输出username中的值。

可是通过这种办法丰硕的事件管理纵然直观方便,但有超级多害处:
(1)因为页面加载顺序是从上往下,要是绑定的本子写在html上面,恐怕顾客点击成分的时候剧本尚未进行,产生客户点半天没影响,如:

...
...//很多内容
...
<script>
    function showMessage(){
        //...
    }
</script>

(2)html和js代码紧凑结合,举例showMessage这些艺术,若是分界面内比超级多成分都经过这种办法绑定了那一个方法,那么大器晚成旦某一刻想给那么些函数换四个名字时,你供给同一时间退换比超级多处地点,十分费力。

var btn = document.getElementById('btn');
btn.addEventListener('click',function() {
    alert(this.id);
},false);

javascript 事件管理

【写在前头】近来径直在看js的功底,究竟jquery即便好用,总归是用着别人写的,只会用api不及搞领会完成的法规。等把js幼功巩固好了确定要去读jquery的源码。

因此add伊芙ntListener增添的事件管理程序只好用removeEventListener来移除;移除时传出的参数与丰盛管理程序时行使的参数相通,这也就代表通过addEventListener增添的佚名函数不可能移除。

DOM2级管理程序

IE9、Firefox、chrome、safari和opera帮忙DOM2级事件管理程序
“DOM2级事件”定义了七个点子,用于钦命和删除事件管理程序的操作:add伊夫ntListener(卡塔尔国和remove伊芙ntListener(卡塔尔。全体DOM节点都有那些主意,并选用3个参数:事件名、事件管理函数和三个布尔值。那几个布尔值代表了是应用捕获依然冒泡,true代表在抓获阶段管理,false代表在冒泡阶段管理,不填暗中认可是false。

var btn = document.getElementById(button);
btn.addEventListener(click, function(){
    //...
}, false);

和DOM0级事件管理差别,通过这种措施绑定的事件管理能够频仍加上,比方

var btn = document.getElementById(button);
btn.addEventListener(click, function(){
    alert(first);
}, false);
btn.addEventListener(click, function(){
    alert(this.id);
}, false);

并且在函数内this相符代表目的成分,点击开关后会先输出first,再出口该btn的id。
透过addEventListener加多的平地风波只可以通过removeEventListener移除,何况参数必得风流罗曼蒂克致(多少个参数完全一样),那代表行使无名氏函数绑定的平地风波是回天无力移除的,最棒将事件处理函数单独定义。

btn.addEventListener(click, function(){
    alert(first);
}, false);
btn.removeEventListener(click, function(){
    alert(first);
}, false); //没有效果

btn.addEventListener(click, showMessage, false);
btn.removeEventListener(click, showMessage, false); //移除成功

target      Element 只读  事件的目的

在此个函数内部,this指向事件的目的成分,比方:

IE8及更早版本不帮忙DOM事件流

那样一来,大家就足以更简短的拜谒自身的质量,如下和前边的事例效果相像。

“DOM2级事件”规定的风云流包罗多少个阶段:事件捕获阶段、处于目的阶段和事件冒泡阶段
document -> html -> body -> div -> p-> div -> body -> html -> document

var object=document.getElementById('xc');
function handler(){
    alert(this.innerHTML);
}
object.attachEvent('onclick',function(){
    handler.call(object,arguments);
});

跨浏览器的事件管理程序

假使点击p元素,那么click事件首先在p成分上发生,这些因素是咱们单击的元素。然后,click事件沿着DOM树向上传播,在每一流节点上都会发生,直到传播到document对象。传播顺序如下:

在触发DOM上的某些事件时,会爆发贰个风浪目的event,那个指标中蕴含着独具与事件有关的音讯。

因为运用attachEvent加多的事件管理程序中this指向window,所以我们平日选择srcElement来顶替this。

DOM0级事件管理程序

应用HTML事件管理程序的毛病

function handler(e){
    e = e||window.event;
    var _this = e.srcElement||e.target;
    alert(_this.innerHTML);
}
var object = document.getElementById('xc');
object.attachEvent('onclick',handler);

stopPropagation   Function 只读  撤废事件的尤为捕获或许冒泡,同期阻止任何事件管理程序被调用(DOM3级事件中新增加)

returnValue     Element 读/写   暗中认可值为true,将其设置为false能够裁撤事件的默许行为

这么钦定事件管理程序有所局地亮点。首先,那样会制造一个封装着成分属性值的函数。那几个函数中有一个某个变量event,也便是事件指标。

事件代理

var EventUtil = {
    // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
    stopPropagation : function(ev) {
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }
    },
    // 取消事件的默认行为
    preventDefault : function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    // 获取事件目标
    getTarget : function(event) {
        return event.target || event.srcElement;
    },
    // 获取event对象的引用
    getEvent : function(event) {
        return event ? event : window.event;
    }
}
var btn = document.getElementById('btn');
btn.onclick = function(event) {
    var event1 = window.event;
    alert(event === event1);  //IE11中为true
}

大家给二个dom同期绑定三个点击事件,叁个用捕获,两个用冒泡,那么事件的实行顺序是如何的?

接受attach伊芙nt与运用DOM0级方法的着重差距在于事件管理程序的功效域,使用attach伊芙nt时,事件管理程序会在全局功效域中运营,因而this等于window。

 

jQuery的写法:

preventDefault   Function  只读  撤销事件私下认可行为,借使cancelable是true则能够选择这些格局

接受attach伊芙nt也可感觉多个要素加多多个事件管理程序,不过那几个事件管理程序实际不是以丰硕它们的逐一奉行,而是以相反的次第被推行。

出于老版本浏览器不援救,由此很稀有人使用事件捕获。

事件冒泡

行使事件代理第大器晚成有四个优势:

假定当前成分是个表单输入成分,则表用域中还也许会含有访谈表单成分(父成分)的入口,那个函数就改为了之类所示:

事件指标

事件捕获

举个例子宛如下嵌套的HTML页面:

即使clickFun函数是在页面最尾巴部分定义的,那么在页面解析该函数早前点击都会抓住错误。因而,超级多HTML事件管理程序都会被卷入到try-catch之中:

<input id="btn" type="button" value="click me" onclick="alert(123);">
<script>
    var btn = document.getElementById('btn');
    //输出function onclick(event) {  alert(123);} 
    alert(btn.onclick); 
    //单击按钮没反应
    btn.onclick = null;
</script>

也足以去除通过DOM0级方法钦命的事件管理程序:

IE事件管理程序

function addEvent(element, type, handler) {
    if (element.addEventListener) {
        //事件类型、需要执行的函数、是否捕捉(false表示冒泡)
        //IE9 支持addEventListener,IE8及以下不支持addEventListener
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        //IE11之后不再支持attachEvent
        //attachEvent添加的时间函数中this指向window
        //IE6-8只支持事件冒泡不支持事件捕获
        element.attachEvent('on'   type, handler);
    } else {
        element['on'   type] = handler;
    }
}

// 移除事件
function removeEvent(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else if (element.datachEvent) {
        element.detachEvent('on'   type, handler);
    } else {
        element['on'   type] = null;
    }
}
var btn = document.getElementById('btn');
btn.attachEvent('onclick',function() {
    alert('clicked');
})

本文由68399皇家赌场发布于集成经验,转载请注明出处:JavaScript知识总结,事件处理

关键词: 68399皇家赌场 JavaScript 前端

上一篇:python相关介绍,Python入门指南

下一篇:没有了

最火资讯