js事件監聽實例詳解

事件監聽的定義

在Javascript中，瀏覽器一般分為兩大類：

① 基於IE核心的瀏覽器（版本號小於9的IE瀏覽器）

② 基於W3C核心的瀏覽器（版本號碼大於9的IE瀏覽器、Firefox、Google等瀏覽器）

1）基本語法：基於IE核心瀏覽器

dom物件.attachEvent(type，callback，capture) ：為元素綁定事件監聽程式

參數說明：

type：綁定的事件類型，如onclick、onmouseover 、onmouseout

callback：事件的處理程序，通常是一個匿名函數

capture：使用的瀏覽器模型，冒泡模型與捕獲模型，預設IE8以下的瀏覽器只支援冒泡模型！

?

1 #2 3 ##4 5 6 7 8 #9 10 ##11 12

//封装$函数，用于获取id的元素 function $(id){ return document.getElementById(id) } //绑定事件监听 $('btn').attachEvent('onclick',function(){ alert('hello') }); //二次绑定 $('btn').attachEvent('onclick',function(){ alert('world') });

#2、

基本語法：基於W3C核心的事件監聽dom物件.addEventListener(type，callback) ：為W3C核心瀏覽器綁定事件監聽912

參數說明： type：綁定事件類型，不帶'on'前綴，如click，mouseover，mouseout # callback：事件的處理程序，通常是匿名函數 #1 2 ##3 4 5 6 7 8

10 # 11

############

//封装$函数，用于获取id的元素
function $(id){
    return document.getElementById(id)     
}
//绑定事件监听
$('btn').addEventListener('onclick',function(){
    alert('hello')
});
//二次绑定
$('btn').addEventListener('onclick',function(){
    alert('world')
});

############

總結事件監聽的差異

IE核心的監聽方式與W3C核心的監聽方式：

①方式不同

IE核心的瀏覽器使用attachEvent進行綁定

W3C核心的瀏覽器使用addEventListener進行綁定

②參數不同

IE核心瀏覽器，其綁定方式一共有三個參數type，callback，capture（使用的瀏覽器模型）

W3C核心瀏覽器，其綁定方式一共有二個參數，type和callback

③type參數不同​​

IE內核的瀏覽器，type是需要添加'on'前綴的，如onclick

W3C內核瀏覽器，type是不需要添加'on'前綴的，如click

#④觸發順序不同

IE核心的瀏覽器，其事件監聽是先綁定後觸發，後綁定的先觸發

W3C內核的瀏覽器，其事件監聽是先綁定先觸發，後綁定的後觸發

相關推薦：

Node.js中的事件監聽和事件發布用法實例詳解

JS組合按鍵事件監聽外掛程式的詳細介紹

#jQuery-mobile事件監聽與用法詳解

#

以上是js事件監聽實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！