JavaScript事件處理實現(xiàn)切換商品類別的選項卡案例描述

本案例使用JavaScript技術(shù)實現(xiàn)一個通過選項卡切換不同類別商品的效果。頁面中有5個選項卡，分別代表不同類別的商品。當(dāng)鼠標(biāo)指向不同的選項卡時，頁面下方會顯示對應(yīng)的商品信息。技術(shù)準(zhǔn)備

事件處理程序在JavaScript中的調(diào)用

事件處理程序在HTML中的調(diào)用事件處理程序在JavaScript中的調(diào)用<inputid="save"name="bt_save"type="button"value="保存"><script>varb_save=document.getElementById("save");b_save.onclick=function(){alert("單擊了保存按鈕");}</script>事件處理程序在HTML中的調(diào)用<inputname="bt_save"type="button"value="保存"onclick="clickFunction();"><script>

functionclickFunction(){alert("單擊了保存按鈕");}</script>案例實現(xiàn)簡單計算器案例描述

本案例實現(xiàn)一個簡單的計算器功能，通過該計算器可以對數(shù)值進行加、減、乘、除等運算。技術(shù)準(zhǔn)備

事件流

兩種事件模型

事件對象Event事件流兩種事件模型冒泡型捕獲型事件從最具體的元素開始觸發(fā)，然后向上傳播至不那么具體的元素與冒泡型事件剛好相反，先是不那么具體的元素先捕捉到事件，然后事件沿DOM樹逐漸向下，一直傳播到事件的實際目標(biāo)事件對象Event在W3C事件模型中，需要將Event對象作為一個參數(shù)傳遞到事件處理函數(shù)中onKeyUp="example(event)"如果有多個參數(shù)，則Event對象引用可以以任意順序排列onKeyUp="example(this,event)"與元素綁定的函數(shù)定義中，應(yīng)該有一個參數(shù)變量來“捕獲”Event對象參數(shù)functionexample(widget,evt){…}事件對象Event還可以通過其他方式將事件處理函數(shù)綁定到對象，將這些事件處理函數(shù)的引用賦給文檔中所需的對象document.forms[0].someButton.onkeyup=example;document.getElementById("myButton").addEventListener("keyup",example,false);函數(shù)需要用一個參數(shù)變量來接收傳遞的Event對象functionexample(evt){…}案例實現(xiàn)模仿影視網(wǎng)站星級評分功能案例描述

本案例實現(xiàn)模仿影視網(wǎng)站星級評分的功能。在頁面中輸出五個星星圖標(biāo)，當(dāng)鼠標(biāo)指向某一顆星星時，右側(cè)會顯示相應(yīng)的分?jǐn)?shù)，上方會顯示評分結(jié)果，當(dāng)單擊星星圖標(biāo)時會在下方顯示用戶的評分。技術(shù)準(zhǔn)備

鼠標(biāo)的單擊事件

鼠標(biāo)的按下和松開事件

鼠標(biāo)的移入和移出事件

鼠標(biāo)的移動事件鼠標(biāo)的單擊事件

onclick在鼠標(biāo)單擊時被觸發(fā)的事件鼠標(biāo)的按下和松開事件

onmousedown在鼠標(biāo)鍵按下時觸發(fā)事件處理程序

onmouseup在鼠標(biāo)鍵松開時觸發(fā)事件處理程序鼠標(biāo)的移入和移出事件

onmouseover在鼠標(biāo)指針移動到對象上方時觸發(fā)事件處理程序

onmouseout在鼠標(biāo)指針移出對象上方時觸發(fā)事件處理程序鼠標(biāo)的移動事件

onmousemove鼠標(biāo)指針在頁面上進行移動時觸發(fā)事件處理程序案例實現(xiàn)實現(xiàn)用戶注冊頁面案例描述

用戶在進行注冊時，首先需要同意相關(guān)的注冊協(xié)議，才能進一步實現(xiàn)注冊。本案例將實現(xiàn)一個用戶注冊頁面。當(dāng)用戶未選中注冊協(xié)議復(fù)選框時，“注冊”按鈕為禁用狀態(tài)。當(dāng)用戶選中注冊協(xié)議復(fù)選框時，“注冊”按鈕為啟用狀態(tài)。而且如果輸入的注冊信息不符合要求就不允許提交表單。技術(shù)準(zhǔn)備DOM標(biāo)準(zhǔn)下注冊多個事件監(jiān)聽器與移除監(jiān)聽器的方法

取消事件傳遞和默認(rèn)處理DOM標(biāo)準(zhǔn)下注冊多個事件監(jiān)聽器與移除監(jiān)聽器的方法注冊監(jiān)聽器addEventListener()方法語法格式element.addEventListener('click',observer,useCapture);移除監(jiān)聽器removeEventListener()方法語法格式element.removeEventListener('click',observer,useCapture);取消事件傳遞和默認(rèn)處理取消瀏覽器的事件傳遞stopPropagation()方法functionsomeHandle(event){ event.stopPropagation();}取消事件傳遞后的默認(rèn)處理preventDefa