學習日誌17-event(事件)3

第 11 屆 iThome 鐵人賽

DAY 17

自我挑戰組

JavaScript學習日誌系列第 17 篇

11th鐵人賽

古德瑞

2019-10-02 18:36:13

2245 瀏覽

分享至

e.target - 了解目前所在元素位置

使用e.target可以確定知道所選擇的元素是否是自己需要的。

//HTML
<body>
    <ul>
      <li><a href="#">123</a></li>
    </ul>
</body>

//Javascript
var el = document.querySelector('html');
el.addEventListener('click',function(e){
  e.preventDefault();
  console.log(e.target.nodeName);
})

html新增一組UL標籤 <ul><li><a href="#">123</a></li></ul> 來試驗 e.target 功用
新增el變數用來querySelector選擇html標籤
監聽el.addEventListener點擊觸發事件
因為html有a連結，用e.preventDefault()取消瀏覽器的預設行為
在寫console.log(e.target.nodeName)來顯示點擊到哪個元素，nodeName是節點名稱
在瀏覽器console以下結果

change - 表單內容更動內容觸發

練習使用下拉式選單select，選擇不同選項，顯示不同的內容 :

先建構html，下拉式選單 id="sportId"，列表 UL.sportlist，內容為空(等用JS插入)

<body>
    <select id="sportId">
        <option value="路跑">路跑</option>
        <option value="騎車">騎車</option>
    </select>
    <ul class="sportlist"></ul>
</body>

寫JS，創兩個變數分邊先選則 select#sportId 跟 ul.sportlist

var sport = document.getElementById('sportId');
var sportlist = document.querySelector('.sportlist');

宣告motion陣列內容，並宣告len計算陣列總數

var motion = [
    {
        sportType: '路跑',
        sportplace: '田徑場'
    },
    {
        sportType: '路跑',
        sportplace: '操場'
    }
    ,{
        sportType: '騎車',
        sportplace: '河濱'
    }
]
var len = motion.length;

命名updateSport這支function來處理選到指定選單後更改成相對應的內容:
I. 宣告select，用e.target.value來確認當前選項的值
II. 宣告str為空值，等會用迴圈抓取資料再填入
III. 用迴圈抓陣列裡的sportType比對下拉選單的值select== motion[i].sportType
IV. 將比對相同的內容累加在str變數裡 str += '<li>'+motion[i].sportplace+'</li>'
V. 最後將str的資料用innerHTML插入UL.sportlist裡sportlist.innerHTML = str;

function updateSport(e){
    var select = e.target.value;
    var str='';
    for(var i=0;len>i;i++){
        if(select== motion[i].sportType){
            str += '<li>'+motion[i].sportplace+'</li>'
        }
    }
    sportlist.innerHTML = str;
}

最後監聽事件，監聽下拉式選單**#sport動作，觸發updateSport**

sport.addEventListener('change',updateSport,false)

練習結果

附上JS

var sport = document.getElementById('sportId');
var sportlist = document.querySelector('.sportlist');

var motion = [
    {
        sportType: '路跑',
        sportplace: '田徑場'
    },
    {
        sportType: '路跑',
        sportplace: '操場'
    }
    ,{
        sportType: '騎車',
        sportplace: '河濱'
    }
]
var len = motion.length;

function updateSport(e){
    var select = e.target.value;
    var str='';
    for(var i=0;len>i;i++){
        if(select== motion[i].sportType){
            str += '<li>'+motion[i].sportplace+'</li>'
        }
    }
    sportlist.innerHTML = str;
}


sport.addEventListener('change',updateSport,false)