webAPI中的事件
阿新 • • 發佈：2019-01-14
一，為元素繫結事件
1.物件.addEventlistener(“事件的型別”,“事件的處理函式”,“false”)
引數1：事件的型別—>事件的名字 沒有on
引數2：事件的處理函式----->匿名函式/命名函式
引數3：布林值 目前寫false 預設的就是false，可寫可不寫
為同一個元素繫結多個事件
my$("btn").addEventListener("click",function () { console.log("hehe")； },false); my$("btn").addEventListener("click",function () { console.log("haha")； },false);
2.物件.attachEvent(“有on的事件型別”，事件的處理函式)
my$("btn").attachEvent("onclick",function () {
console.log("lalalala")
})
my$("btn").attachEvent("onclick",function () {
console.log("balabala")
})
二，關於事件的監聽
定義一個 為任意元素繫結的任意事件---->引數：元素，事件，函式 function addEvent(element,type,fn) { //判斷瀏覽器是否支援這個方法 if (element.addEventListener) { element.addEventListener(type,fn,false); }else if (element.attachEvent){ element.attachEvent("on"+type,fn) } else { element["on"+type]=fn; } } //測試 addEvent(my$("btn"),"click",function () { console.log("hehe") }) addEvent(my$("btn"),"click",function () { console.log("haha") })
三，解綁事件
先給靜態頁面兩個input標籤
<body>
<input type="button" value="點選" id="btn">
<input type="button" value="幹掉第一個按鈕的事件" id="btn2">
</body>
在專案中新建一個名為comment.js檔案，並定義一個通過id選擇器獲取元素的方法。
function my$(id){
return document.getElementById(id);
}
將comment.js檔案引入當前頁面中，在此頁面中通過id獲取元素就可以不用寫document.getElementById(“元素id名”)，直接呼叫my$(“元素id名”)的方法
<script src="comment.js"></script>
接下來就開始寫js部分了
my$("btn").onclick=function () {
console.log("hehe");
}
點選第二個按鈕解綁第一個事件
my$("btn2").onclick=function () {
my$("btn").onclick=null;
}
function f1(){
console.log("log");
}
my$("btn").addEventListener("click",f1,false)
my$("btn").addEventListener("click",function () {
console.log("he,women");
},false)
解綁第一個事件
my$("btn2").onclick=function(){
解綁的方法 被解綁的物件.removeEventListener("要解綁的事件","要解綁的函式",布林值)
my$("btn").removeEventListener("click",f1,false)
}
解決瀏覽器繫結事件的相容問題
function addEvent(element,type,fn) {
//判斷瀏覽器是否支援這個方法
if (element.addEventListener) {
//支援 就呼叫當前方法
element.addEventListener(type,fn,false);
}
else if (element.attachEvent){
//IE瀏覽器的解決方法
element.attachEvent("on"+type,fn)
}
else {
//其他瀏覽器的解決方法
element["on"+type]=fn;
}
}
//測試
addEvent(my$("btn"),"click",f1)
addEvent(my$("btn"),"click",function () {
console.log("haha")
})