javascript事件的綁定基礎(chǔ)實(shí)例講解（34）
更新時(shí)間：2017年02月14日 16:34:14 作者：厚積薄發(fā)2017
這篇文章主要為大家詳細(xì)介紹了javascript事件的綁定基礎(chǔ)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js事件綁定的具體代碼，供大家參考，具體內(nèi)容如下
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
//為按鈕綁定一個(gè)單擊響應(yīng)函數(shù)
/*btn01.onclick = function(){
alert(1);
};
//再為按鈕綁定一個(gè)單擊響應(yīng)函數(shù)
btn01.onclick = function(){
alert(2);
};*/
/*
* 使用 對(duì)象.事件 的形式不能同時(shí)為一個(gè)元素的同一個(gè)事件綁定多個(gè)處理函數(shù)，
* 如果綁定了多個(gè)，則后邊的會(huì)將前邊的覆蓋掉
*
* 如果需要同時(shí)為一個(gè)事件綁定多個(gè)響應(yīng)函數(shù)，則可以使用
* addEventListener()這個(gè)方法來(lái)綁定響應(yīng)函數(shù)
* 參數(shù)：
* 1.要綁定的事件（字符串 不要on）
* 2.回調(diào)函數(shù)（事件觸發(fā)時(shí)，該函數(shù)將會(huì)執(zhí)行）
* 3.是否在捕獲階段觸發(fā)事件（都傳false）
*
* 使用這種方式可以同時(shí)為一個(gè)事件綁定多個(gè)響應(yīng)函數(shù)，
* 響應(yīng)函數(shù)按照綁定的順序執(zhí)行
*
* 該方法不支持IE8及以下的瀏覽器
* 在這些瀏覽器中需要使用 attachEvent()方法來(lái)實(shí)現(xiàn)相同的功能
*/
/*btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);
btn01.addEventListener("click",function(){
alert(3);
},false);*/
/*
* attachEvent()
* - 參數(shù)：
* 1.事件的類型（字符串 要on）
* 2.回調(diào)函數(shù)
*
* attachEvent()
* - 可以同時(shí)為一個(gè)事件綁定多個(gè)響應(yīng)函數(shù)，但是它的執(zhí)行順序不一定
* ie9 ie10 先綁定先執(zhí)行
* ie8 后綁定先執(zhí)行
*
* 這個(gè)方法只支持IE10及以下的瀏覽器
*/
/*btn01.attachEvent("onclick" , function(){
alert(1);
});*/
/*btn01.attachEvent("onclick" , function(){
alert(2);
});
btn01.attachEvent("onclick" , function(){
alert(3);
});*/
/*
* 在正常瀏覽器中使用addEventListener()來(lái)綁定
* 它的響應(yīng)函數(shù)中的this就是綁定事件的對(duì)象
* 而在IE中，使用的是attachEvent()來(lái)綁定的事件
* 而它的響應(yīng)函數(shù)中的this是window
*/
bind(btn01 , "click" , function(){
alert(this);
});
};
/*
* 自定義一個(gè)函數(shù)，來(lái)兼容所有的瀏覽器
* 參數(shù)：
* obj 要綁定事件的對(duì)象
* eventStr 事件的字符串,不要on
* callback 回調(diào)函數(shù)，事件觸發(fā)時(shí)調(diào)用的函數(shù)
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//如果是正常瀏覽器
obj.addEventListener(eventStr , callback , false);
}else{
//IE8
/*
* attachEvent()中的回調(diào)函數(shù)的this是window，需要修改為obj
* this是誰(shuí)由函數(shù)的調(diào)用方式?jīng)Q定
* 1.以函數(shù)的形式調(diào)用，this是window
* 2.以方法的形式調(diào)用，this是調(diào)用方法的對(duì)象
* 3.以構(gòu)造函數(shù)的形式調(diào)用，this是新創(chuàng)建的對(duì)象
* 4.使用call和apply調(diào)用時(shí)，this是第一個(gè)參數(shù)
*/
obj.attachEvent("on"+eventStr , function(){
//在attchEvent()中不傳遞callback而是傳遞一個(gè)匿名函數(shù)
//這樣在事件觸發(fā)時(shí)，瀏覽器不會(huì)調(diào)用callback而是調(diào)用匿名函數(shù)
//在匿名函數(shù)中來(lái)調(diào)用回調(diào)函數(shù)
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn01">點(diǎn)我一下</button>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易留言板特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
cookie丟失問(wèn)題(認(rèn)證失效) Authentication （用戶驗(yàn)證信息）也會(huì)丟失
window.showModalDialog() 后 window.open() 導(dǎo)致cookie丟失問(wèn)題(認(rèn)證失效) Authentication （用戶驗(yàn)證信息）也會(huì)丟失2009-06-06
文章介紹了array.filter()方法的使用和技巧,強(qiáng)調(diào)了其在數(shù)據(jù)篩選、數(shù)據(jù)清洗和鏈?zhǔn)秸{(diào)用中的優(yōu)勢(shì),本文介紹JavaScript中通過(guò)array.filter()實(shí)現(xiàn)數(shù)組的數(shù)據(jù)篩選、數(shù)據(jù)清洗和鏈?zhǔn)秸{(diào)用,JS中數(shù)組過(guò)濾器的使用詳解,感興趣的朋友一起看看吧2024-11-11
JS中通過(guò)slice()&substring()截取字符串前幾位的方法
在Javascript使用字符串中,我們不一定需要全部的字符串,這時(shí)就需要截取字符串,本文主要介紹js中截取字符串前幾位的兩種方法：1、使用slice() 方法；2、使用substring() 方法,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12
異步是指進(jìn)程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不用管其他進(jìn)程的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于JS異步編程方法的6種方案,需要的朋友可以參考下
2023-01-01 
利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)檢測(cè)用戶是否在線功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2022-12-12 
JS中的for in 可遍歷變量的所有屬性！利用此特性制作了一個(gè)JS當(dāng)前屬性查詢！
2010-12-12 
使用js實(shí)現(xiàn)關(guān)閉js彈出層的窗口
本篇文章主要是對(duì)使用js實(shí)現(xiàn)關(guān)閉js彈出層的窗口的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02