點選事件的委派
window.onload = function(){
// 獲取按鈕
var btn = document.getElementById("btn")
// 獲取ul
var ul = document.getElementsByTagName("ul")[0]
btn.onclick = function(){
// 建立li
var li = document.createElement("li")
// 給li新增a連結內容
li.innerHTML = "<a href='http://www.baidu.com'>百度<a>"
ul.appendChild(li)
}
// 為每一個li繫結一個單擊事件 告訴我要取快遞
var a = document.getElementsByTagName("a")
// for(var i = 0; i < a.length;i++){
// a[i].onclick = function(){
// alert("給我取個快遞")
// return false
// }
// }
ul.onclick = function(event){
event = event || window.event
console.log(event.target.className)
if(event.target.className){
alert("dan ji shi jian")
}
return false
}
}
<button id="btn">按鈕</button>
<ul>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
<li><a href="http://www.baidu.com" class="link">百度</a></li>
</ul>
相關文章
- javascript基礎(事件的委派)(三十三)JavaScript事件
- databinding的點選事件事件
- Swift UITableView巢狀UICollectionView點選事件衝突(點選事件穿透)SwiftUIView巢狀事件穿透
- 禁止滑鼠點選事件事件
- RecyclerView中item點選事件View事件
- css禁用滑鼠點選事件CSS事件
- javascript對點選事件和拖動事件的區分JavaScript事件
- QHeaderView的點選和雙擊事件HeaderView事件
- tabbar凸起點選事件處理tabBar事件
- echarts 工具條點選事件控制Echarts事件
- MxDraw雲圖點選事件教程事件
- DataBinding中xml 點選事件XML事件
- R::shiny 點選事件-Demo事件
- asp.net中的html控制元件點選事件與伺服器控制元件點選事件的不同ASP.NETHTML控制元件事件伺服器
- Android觸控事件(續)——點選長按事件Android事件
- jquery實現的右鍵滑鼠點選事件jQuery事件
- 點選事件獲取當前li的索引事件索引
- iOS下的點選事件失效解決方法iOS事件
- EditText的點選事件遮蔽鍵盤響應事件
- js實現的按鈕不用人為點選就觸發點選事件JS事件
- RecyclerView-->點選和長按事件View事件
- 中國地圖繪製-點選事件地圖事件
- UITableView 點選事件建立UIAlertControllerUIView事件Controller
- Android--按鈕點選事件Android事件
- view.performClick()觸發點選事件ViewORM事件
- React table 表單裡的內容點選事件React事件
- 使用介面實現RecyclerView中的item點選事件View事件
- 模擬實現超連結的點選事件事件
- iOS不規則控制元件的點選事件iOS控制元件事件
- 【FAQ】關於JavaScript版本的華為地圖服務Map的點選事件與Marker的點選事件存在衝突的解決方案JavaScript地圖事件
- 從點選螢幕到事件處理的事件分發原始碼流程事件原始碼
- android 觸控(Touch)事件、點選(Click)事件的區別(詳細解析)Android事件
- 手持裝置點選響應速度,滑鼠事件與touch事件的那些事事件
- IOS setOnclick - 點選事件完美擴充套件iOS事件套件
- DataBinding點選事件沒有反應事件
- 前端進階之路:點選事件繫結前端事件
- 用Kotlin實現Android點選事件的方法KotlinAndroid事件
- jQuery實現的點選Enter鍵觸發指定事件jQuery事件