整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
第1關：注冊事件處理程序
任務描述
本關任務：為指定的事件注冊事件處理程序。
相關知識
頁面上的每一個元素，會發生幾種不同的事件，比如表單元素，可能會發生提交事件，也可能發生重置事件，我們需要為每一個事件綁定一個事件處理程序，也叫為事件注冊事件處理程序。
下面是三種注冊事件處理程序的方法。
為對象設置一個函數
頁面上的元素對應一個對象，元素的每一個事件對應對象的一個屬性，比如：
var myForm = document.getElementById("myForm");
myForm對應頁面中id值為myForm的表單，myForm.onsubmit對應表單提交事件，myForm.onreset對應表單重置事件。通過為這些屬性設置一個函數類型的值，實現事件處理程序的注冊：
//為表單提交事件注冊處理程序
myForm.onsubmit = function() {
console.log("表單提交的事件處理程序");
}
//為表單重置事件注冊處理程序
myForm.onreset = function() {
console.log("表單重置的事件處理程序");
}
設置HTML標簽屬性的值為事件處理程序
比如，設置form標簽的屬性的值為事件處理程序：
function submitForm() {
console.log("表單提交的事件處理程序");
}
這樣提交表單時，就會觸發()函數。
調用()函數
頁面元素對應的JS對象，通過調用()函數也可以注冊事件處理程序，函數的第一個參數是事件的類型，第二個參數是事件處理程序：
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit",function() {
console.log("表單提交中");
});
submit表示這是一個表單提交事件，后面的匿名函數即表單提交的事件處理程序。
編程要求
本關的編程任務是補全右側代碼片段中Begin至End中間的代碼，具體要求如下：
通過()獲取id為button2的按鈕，賦值給變量button2，然后使用button2.onclick()方法為該按鈕綁定事件處理程序()；
通過()獲取id為button3的按鈕，賦值給變量button3，然后使用button3.()方法為該按鈕綁定click事件的事件處理程序()。
測試說明
測試過程：
平臺將讀取用戶補全后的.html；
執行其中的代碼，檢測click事件是否注冊了指定的處理程序；
成功輸出button2按鈕設置事件處理成功，button3按鈕設置事件處理成功，否則輸出button2按鈕設置事件處理失敗，button3按鈕設置事件處理失敗。
以下是測試樣例：
測試輸入：
無測試輸入
預期輸出：
button2按鈕設置事件處理成功，button3按鈕設置事件處理成功
海到無邊天作岸，山登絕頂我為峰。 ——林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考代碼：
<html lang="zh">
Title
<script>
function listenButton1() {
console.log("監聽button1");
}
function listenButton2() {
console.log("監聽button2");
}
function listenButton3() {
console.log("監聽button3");
}
//請在此處編寫代碼
/********** Begin **********/
var button2 =document.getElementById("button2");
button2.onclick=listenButton2;
var button3 =document.getElementById("button3");
button3.addEventListener("click",listenButton3);
/********** End **********/
</script>
第2關：文檔加載事件
任務描述
本關任務：處理文檔加載事件。
相關知識
文檔，指的是網頁上的所有元素構成的一種格式化文本。文檔加載事件指瀏覽器從服務器下載并渲染完文檔后發生的事件。
文檔加載事件名字為load。
文檔加載事件
當文檔加載完成后，就會觸發文檔加載事件監聽程序（即上一關所說的事件處理程序），一般我們會在這個時候監測用戶瀏覽器的類型、版本，從而加載不同的腳本。
在大多數情況下，文檔記載事件綁定在body元素上，表示網頁主體加載完成后觸發該事件，也有少數情況下綁定在image等元素上，表示相關的元素加載完成后觸發該事件。
文檔加載完成后監測用戶的瀏覽器類型并在控制臺打印：
function detectBrowser(){
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
if (userAgent.indexOf("Opera") > -1) {//判斷是否是Opera瀏覽器
console.log("Opera");
};
if (userAgent.indexOf("Firefox") > -1) { //判斷是否是Firefox瀏覽器
console.log("Firefox");
}
if (userAgent.indexOf("Chrome") > -1) { //判斷是否是Chrome瀏覽器
console.log("Chrome");
}
if (userAgent.indexOf("Safari") > -1) {//判斷是否是Safari瀏覽器
console.log("Safari");
}
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
console.log("IE");
};
}
編程要求
本關的編程任務是補全右側代碼片段中Begin至End中間的代碼，具體要求如下：
在文檔加載完成后（即文檔加載事件發生后），在控制臺輸出Welcome!；
字符串放在英文雙引號內。
測試說明
測試過程：
平臺將讀取用戶補全后的OnLoad.html；
執行其中的代碼，檢測當文檔加載完成后，是否在控制臺輸出Welcome!；
成功輸出文檔加載事件處理成功，否則輸出文檔加載事件處理失敗。
以下是測試樣例：
測試輸入：
無測試輸入
預期輸出：
文檔加載事件處理成功
海到無邊天作岸，山登絕頂我為峰。 ——林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考代碼：
Title
<script>
function loadEvent() {
//請在此處編寫代碼
/********** Begin **********/
var userAgent =navigator.userAgent;
if(userAgent){
console.log("Welcome!")
}
/********** End **********/
}
</script>
第3關：鼠標事件
任務描述
本關任務：練習鼠標事件的處理。
相關知識
鼠標是計算機最常見的外設之一，鼠標事件指用戶操作鼠標的過程中觸發的事件。
常見的鼠標事件
說到鼠標事件，最常見的無非是鼠標單擊事件click，很多按鈕都會綁定一個onclick()函數，表示當用戶單擊鼠標后會執行的函數。其實還有很多鼠標事件，比如雙擊鼠標、按下鼠標等，下面是一個總結：
為頁面上的某一個元素綁定一個鼠標事件，當用戶在該元素上用鼠標執行了指定的動作后，就會觸發指定的鼠標事件處理程序，開始執行函數。
鼠標的按下和釋放
表示鼠標按下的事件，是用戶按下鼠標后會觸發的事件處理程序；mouseup表示鼠標按鍵釋放的事件，表示用戶釋放鼠標按鍵后會觸發的事件處理函數。
下面是一個例子，頁面上有一行文字“點我”，用戶在文字上按下鼠標按鍵后，文字會變成“鼠標已經按下”，而用戶釋放鼠標后，文字會變成“鼠標已經釋放”。
html代碼如下：
點我
頁面的效果如下：
事件處理函數的代碼如下：
() {
.(“p”). = “鼠標已經按下”;
upfunc() {
.(“p”). = “鼠標已經釋放”;
用戶在文字上面先按下鼠標，再釋放鼠標，效果如下：
編程要求
本關的編程任務是補全右側代碼片段中Begin至End中間的代碼，具體要求如下：
第一步：通過id獲取button（按鈕）元素，賦給變量；
第二步：通過為按鈕綁定一個事件處理程序，用來處理按鈕的鼠標單擊事件；
第三步：在事件處理程序中，通過id獲取p元素，賦給變量，然后設置當按鈕被單擊后，p里面的文本被改變為clicked；
字符串類型的參數用""包含在內；
請嚴格按照步驟操作。
測試說明
測試過程：
平臺將讀取用戶補全后的.html；
執行其中的代碼，判斷用戶是否按照要求為按鈕綁定鼠標單擊事件處理程序；
成功輸出“綁定鼠標單擊事件成功”，否則輸出“綁定鼠標單擊事件失敗”。
以下是測試樣例：
測試輸入：
無測試輸入
預期輸出：
綁定鼠標單擊事件成功
海到無邊天作岸，山登絕頂我為峰。 ——林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考代碼：
Title
text
<script>
//請在此處編寫代碼
/********** Begin **********/
var myButton = document.getElementById("but");
myButton.addEventListener("click",function(){
var myElement = document.getElementById("p");
myElement.innerText="clicked";
})
/********** End **********/
</script>
第4關：鍵盤事件
任務描述
本關任務：利用鍵盤事件判斷用戶在網頁上是否使用了回車鍵。
相關知識
鍵盤事件，是指用戶敲擊鍵盤上的按鍵所代表的事件。
鍵盤事件有三種：
按鍵按下：keydown，用戶按下鍵盤上的鍵；
按鍵釋放：keyup，用戶釋放按鍵；
點擊按鍵：，用戶按下并且釋放了按鍵。
點擊按鍵
表示用戶點擊某個按鍵的事件，該事件會觸發()事件處理程序，()有一個event參數，其中event.which表示點擊的按鍵的編碼。這個編碼是該按鍵的unicode編碼。
需要注意的是，按下鍵盤上的A時，keyCode值是a的編碼，只有同時按下shift和A，keyCode的值才是A的編碼。
下面是一個例子，當用戶點擊鍵盤上的按鍵時，會打印出該按鍵的編碼值：
keypress event
<script>
function keyEvent(event) {
console.log("編碼是:"+event.which);
}
</script>
比如我們按下B時，控制臺如下：
同時按下B和shift，控制臺如下：
按下按鍵
keydown表示用戶按下按鍵，同上面一樣，它也有一個event.which表示按下的按鍵的編碼。
<script>
function downEvent(event) {
console.log("編碼是:"+event.which);
}
</script>
如果你按下按鍵后沒有釋放，控制臺將會一直進行打印，比如按下的是1，控制臺的打印結果如下：
灰色的數字20表示這條信息已經打印了20次。
釋放按鍵
keyup表示用戶釋放按鍵，可以有一個參數event，event.which表示釋放的按鍵的編碼。
<script>
function upEvent(event) {
console.log("編碼是:"+event.which);
}
</script>
比如，當用戶按下1時，控制臺沒有輸出，釋放1后，控制臺輸出如下：
編程要求
本關的編程任務是補全右側代碼片段中Begin至End中間的代碼，具體要求如下，請按步驟操作：
獲取用戶按下的按鍵的編碼，賦值給變量code；
判斷code的值是否為13，是則在控制臺打印cannot use enter。
測試說明
測試過程：
平臺將讀取用戶補全后的.html；
執行其中的代碼，檢測是否按照要求操作；
成功輸出檢測用戶是否使用回車鍵成功，否則輸出檢測用戶是否使用回車鍵失敗。
以下是測試樣例：
測試輸入：
無測試輸入
預期輸出：
檢測用戶是否使用回車鍵成功
參考代碼：
Title
<script>
function pressEvent(event) {
//請在此處編寫代碼
/********** Begin **********/
var code=event.which;
if(code==13){
console.log("cannot use enter");
}
/********** End **********/
}
</script>
第5關：表單事件
任務描述
本關任務：使用change事件檢驗用戶的輸入。
相關知識
表單，即form，是頁面最基本的元素之一，通常，用戶的輸入會放置在表單里面，然后提交給后臺。
form有很多子元素，分別表示不同類型的用戶輸入：例如input表示文本等類型；select表示下拉列表；button表示按鈕。
這些子元素可以被綁定一些事件，比如change表示用戶的輸入發生了改變。這些事件是表單元素特有的。
change事件
change事件表示當前元素失去焦點并且元素的內容發生了改變。失去焦點，指光標不在該元素上，比如光標本來在文本輸入框里面，當用戶在頁面的其他地方點擊了鼠標，文本框就會失去焦點。
下面是一個例子：當用戶輸入文本，并且鼠標點擊頁面上的其他地方后，我們將在控制臺打印出用戶的輸入。
<script>
function changeEve() {
var e = document.getElementById("t1");
console.log(e.value);
}
</script>
比如當用戶輸入I changed后，在頁面的其他地方點擊鼠標，控制臺如下：
select事件
select事件：文本框中的文本被用戶選中時發生。
只能作用在的文本框里面，可以用window.().()獲取選擇的文本。
下面的例子：當用戶選擇了一段文本后，我們在控制臺打印出用戶選擇的文本：
<script>
function selectEve() {
console.log(window.getSelection().toString());
}
</script>
比如我們選擇了鄭王，然后松開鼠標，控制臺的輸出如下：
submit事件
表單的提交事件。
表單里面包含了用戶輸入的信息，最終要傳到后臺的服務器進行處理，這樣就有一個表單的提交過程，submit即表單提交事件。
通常情況下，在submit的事件處理函數中，校驗用戶的輸入是否符合要求，比如密碼的長度夠不夠。
下面的例子，用戶提交表單時，用js校驗用戶輸入的密碼長度是否達到6位。
<script>
function subEve() {
var content = document.getElementById("pw").value;
if (content.length < 6) {
window.alert("密碼不可以小于6位");
}
}
</script>
這時，用戶在密碼輸入框輸入123，點擊提交，頁面會彈出一個警告框如下：
編程要求
本關的編程任務是補全右側代碼片段中Begin至End中間的代碼，具體要求如下：
通過id屬性獲取id為input的文本框，賦值給變量ele；
獲取輸入框中當前文本的長度，賦值給變量len；
判斷len的值是否小于等于12，是則打印出too short input；
字符串參數務必置于雙引號之內。
測試說明
測試過程：
平臺將讀取用戶補全后的.html；
執行其中的代碼，判斷代碼是否對用戶的輸入進行了檢測；
執行了檢測輸出成功檢查了用戶的輸入，否則輸出沒有檢查用戶的輸入。
以下是測試樣例：
測試輸入：
無測試輸入
預期輸出：
成功檢查了用戶的輸入
海到無邊天作岸，山登絕頂我為峰。 ——林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考代碼：
Title
<script>
function changeEvent() {
//請在此處編寫代碼
/********** Begin **********/
if(document.getElementById("input").value.length<=12){
console. log("too short input" )
}
/********** End **********/
}
</script>
第6關：拖動事件
任務描述
本關任務：學習處理拖動事件。
相關知識
元素的拖放
鼠標指向元素，按下鼠標，然后移動鼠標到另一個地方釋放，即拖動元素。
相比html4以及之前的版本，html5增加了一個全新的屬性，表示元素是否支持拖動，默認的情況下，圖片和超鏈接元素是支持拖動的，其他元素不支持。
將元素的屬性設置為true，即表示元素支持拖動。如：下面設置了p元素支持拖動：
元素支持鼠標的拖動
也可以用下面的代碼設置p為可拖動的：
.(“p1”). = true;
ondrag
ondrag()是元素正在拖動時觸發的事件處理程序。如果元素一直在拖動的過程中，ondrag()會每隔350ms被觸發一次，比如，在下面的例子中，我們一直在拖動p元素，控制臺會一直打印拖動的信息：
拖動我!
<script>
function dragging(event) {
console.log("正在拖動");
}
</script>
拖動不放下，控制臺如下：
111表示這條信息已經打印了111次。
用戶開始拖動元素時觸發，可以帶有一個event參數，其中的event.target表示拖動的元素，比如，下面的例子中，用戶開始拖動元素時，觸發了程序，我們嘗試打印一下event.target的內容：
拖動我!
<script>
function dragStart(event) {
console.log(event.target);
console.log("你要拖動的文本的內容是："+event.target.innerText);
}
</script>
拖動文本，效果如下：
第一行是要拖動的文本元素，第二行顯示了文本里面的內容。
編程要求
本關的編程任務是補全右側代碼片段中Begin至End中間的代碼，具體要求如下：
在第一個Begin和End中間設置p元素為可拖動的；
在第二個Begin和End中間使用event.target.在控制臺打印p元素里面的內容；
要求必須按照以上的步驟執行。
測試說明
測試過程：
平臺將讀取用戶補全后的Drag.html；
執行其中的代碼，檢測p元素是否為可拖動的，以及控制臺的打印結果是否為p元素里面的內容；
成功輸出拖動事件處理成功，否則輸出拖動事件處理失敗。
以下是測試樣例：
測試輸入：
無測試輸入
預期輸出：
拖動事件處理成功
海到無邊天作岸，山登絕頂我為峰。 ——林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考答案：
Title
drag me
<script>
function dragging(event) {
/********** Begin **********/
console.log(event.target.innerText);
/********** End **********/
}
</script>
第7關：事件冒泡
任務描述
本關任務：阻止事件冒泡的發生。
相關知識
文檔樹
在前面的學習中，我們說過，文檔元素之間有層次關系，比如：
點我
content
<script>
function clickChild() {
console.log("子");
}
function clickParent() {
console.log("父");
}
</script>
對應這樣一個模型：
其中，箭頭的方向是子節點的方向，而反過來則是父節點的方向。比如，兩個p元素的父節點（父元素）都是div元素。
事件冒泡
在上面的例子中，點擊p元素里面的內容，顯然會觸發p元素的事件處理程序。然后，因為p元素是放在div里面的，點擊p元素相當于點擊了div元素，會觸發div的事件處理程序，這個過程被稱為事件冒泡。
事件冒泡是指，某個事件觸發了某個元素的事件處理程序，接下來，就會自動沿著節點樹往根節點的方向依次觸發經過的路徑上的所有元素的某個事件的處理程序。
比如上面的例子中，用鼠標點擊p標簽里面的文字點我，控制臺的打印結果如下：
第一行是子元素的click事件的事件處理程序的輸出，第二行是父元素的，這里有一個先后的順序，即從子元素一直到根節點。
事件冒泡的控制
事件冒泡不是所有的時候都受到歡迎，有的時候需要控制它的發生，使用event.()即可。
比如，對于上面的例子，我們在子元素的事件處理程序()的最后一行添加一行代碼：
() {
console.log(“子”);
window.event?window.event.=true:event.();
這個時候再次點擊p里面的內容，控制臺的輸出如下：
可以看出，事件沒有冒泡到父元素上面。所以，想要在哪里停止事件的冒泡，就在它的子元素的事件處理程序的最后調用event.()即可。
編程要求
本關的編程任務是補全右側代碼片段中Begin至End中間的代碼，具體要求如下：
在id為div2的元素上面阻止click事件的冒泡。
測試說明
測試過程：
平臺將讀取用戶補全后的.html；
執行其中的代碼，檢測click事件的冒泡是否在指定的位置被阻止；
成功輸出成功阻止事件的冒泡，否則輸出沒有阻止事件的冒泡。
以下是測試樣例：
測試輸入：
無測試輸入
預期輸出：
成功阻止事件的冒泡
海到無邊天作岸，山登絕頂我為峰。 ——林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考代碼：
Title
click me!
<script>
function click1() {
console.log("root");
}
function click2() {
//請在此處編寫代碼
/********** Begin **********/
event.stopPropagation();
/********** End **********/
console.log("parent");
}
function click3() {
console.log("child");
}
</script>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
