js事件監聽

標籤：turn   基本   hello   rip   btn   ref   mouse   list   div   

1、

事件監聽的定義

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

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

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

 

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

dom對象.attachEvent(type，callback，capture) ：為元素繫結事件監聽程式

參數說明：

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

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

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

//封裝$函數，用於擷取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核心瀏覽器綁定事件監聽

參數說明：

type：綁定事件類型，不帶’on’首碼，如click，mouseover，mouseout

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

 

//封裝$函數，用於擷取id的元素function $(id){    return document.getElementById(id)      }//綁定事件監聽$(‘btn‘).addEventListener(‘onclick‘,function(){    alert(‘hello‘)});//二次綁定$(‘btn‘).addEventListener(‘onclick‘,function(){    alert(‘world‘)});

　　

3、

總結事件監聽的區別

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

①方式不同

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

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

②參數不同

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

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

③type參數不同

IE核心的瀏覽器，type是需要添加’on’首碼的，如onclick

W3C核心瀏覽器，type是不需要添加’on’首碼的，如click

④觸發順序不同

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

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

js事件監聽