事件的冒泡捕獲阻止默認代理

事件的認識

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button id="btn">click me</button>
<script>
var btn= document.querySelector('#btn')
btn.onclick = function(e){
  console.log(e)
}                    //e代表綁定的事件對象摩疑，運行可得到藐鹤，是形參而已坞靶。
</script>
</body>
</html>
//得到事件——對象 MouseEvent {isTrusted: true, screenX: 594, screenY: 87, clientX: 37, clientY: 21…}
altKey: false    //點時沒有按alt鍵
bubbles: true      //冒泡的
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 37                      //位置
clientY: 21                //位置
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 37
layerY: 21
metaKey: false
movementX: 0
movementY: 0
offsetX: 28                 //點擊時鼠標 相對于元素本身的偏移
offsetY: 9             //點擊時相對于元素本身的偏移
pageX: 37
pageY: 21
path: Array(5)relatedTarget: null
returnValue: true
screenX: 594
screenY: 87
shiftKey: false
sourceCapabilities: InputDeviceCapabilities
srcElement: button#btn
target: button#btn                            //通過e.target看看點的是誰识补，等同于this和btn,但是有時候會有區(qū)別的酪穿。
timeStamp: 14919.125000000002
toElement: button#btn
type: "click"
view: Window
which: 1
x: 37
y: 21
__proto__: MouseEvent

removeEventListener解綁事件的凳干，其中第二個參數(shù)也就是函數(shù)不能是匿名函數(shù)，否則解綁不了的昆稿，同理于addEventListener纺座。

IE兼容

IE有：

attachEvent添加
detachEvent刪除
全都默認冒泡模式，兩個參數(shù)溉潭，而且事件是'onclick',對比于addEventListener的'click'净响。這時候少欺，this不是綁定的元素了，而是window對象馋贤。

事件對象

剛開始的例子已經得到了事件的對象了赞别，這里比較重要的幾個拿出來說說：

target 事件的目標元素
stopPropagation() 取消事件的進一步捕獲或者冒泡，就是中斷配乓。
preventDefault() 取消事件的默認行為：a鏈接點擊跳轉仿滔；form表單里的按鈕type=submit，點擊就會提交犹芹，崎页，，先不讓它們跳轉腰埂，提交飒焦，先做一些事情，然后才完成默認的屿笼。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
.container,
.box,
.target{
  border:1px solid;
  padding:20px;
}
</style>
</head>
<body>
<button id="btn">click me</button>
<div class="container">
  container
  <div class="box">
    box
    <div class="target">
      target
    </div>
  </div>
</div>
<script>
var btn= document.querySelector('#btn')
btn.onclick = function(e){
  console.log(e)
}
document.querySelector('.container').addEventListener('click',function(e){
console.log('container click..in捕獲')  
},true)
document.querySelector('.box').addEventListener('click',function(e){
console.log('box click..in捕獲')  
},true)
document.querySelector('.target').addEventListener('click',function(e){
console.log('target click..in捕獲')  
},true)
document.querySelector('.container').addEventListener('click',function(e){
console.log('container click..in冒泡')  
},false)
document.querySelector('.box').addEventListener('click',function(e){
 // e.stopPropagation()
  console.log('box click..in冒泡')  
},false)
document.querySelector('.target').addEventListener('click',function(e){
console.log('target click..in冒泡')  
},false)
</script>
  </body>
</html>
//"container click..in捕獲"
"box click..in捕獲"
"target click..in捕獲"
"target click..in冒泡"
"box click..in冒泡"
"container click..in冒泡"

//在box中加入stopPropagation()然后牺荠，，驴一，
"container click..in捕獲"
"box click..in捕獲"
"target click..in捕獲"
"target click..in冒泡"
"box click..in冒泡"
stopPropagation()會阻止事件向后傳遞休雌，向后而已，當下沒事肝断。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<a >baidu</a>
<script>
document.querySelector('a').onclick = 
  function(e){
  e.preventDefault()                   //先不跳轉
  console.log(this.href)
  if(/baidu.com/.test(this.href)){        //是否包含baidu.com
    location.href = this.href            //跳轉
  }
}
</script>
</body>
</html>

老的IE里的事件獲取

用window.event獲取杈曲，比較奇葩。

常見事件

load
unload
select
changge
submit
resize
scroll
focus
blur

事件代理

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="box">box1</div>
   <div class="box">box2</div>
</div>
<script>
function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$('.box').onclick = function(){
  console.log(this.innerText)
}
//$$('.box').onclick = function(){
//  console.log(this.innerText)
//}          //先不用
</script>
</body>
</html>
//點擊元素出現(xiàn)文本信息孝情，只是選擇了box1,box2沒有選擇鱼蝉。
用$$洒嗤，反而點擊兩個都沒有輸出文本箫荡，為什么？
在控制臺：
$$('.box')
(2) [div.box, div.box]    //選中了渔隶，是個NodeList類數(shù)組對象
$$('.box').onclick
undefined                  //沒有onclick這個事件羔挡！事件只能一個一個去綁定。

如圖

這里沒有addEventListener和onclick的间唉，不過有forEach绞灼。

$$('.box').forEach(function(node){
  node.onclick=function(){
    console.log(node.innerText)
  }
})
//就可以了，先遍歷呈野，然后再寫低矮。

比較麻煩，能不能綁定在父元素上被冒？

$('.container').onclick=function(e){
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
  }
}            //e還是形參军掂，事件發(fā)生時才會有意義有值轮蜕，也就是點擊的瞬間，其他時候蝗锥，是會報錯的跃洛，沒有值的。

再深一步：forEach不一定是萬能的终议，汇竭，，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="box">box1</div>
   <div class="box">box2</div> 
</div>
  <button id="add">add</button>
<script>
function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$$('.box').onclick = function(){
  console.log(this.innerText)
}
$$('.box').forEach(function(node){
 node.onclick=function(){
   console.log(node.innerText)
  }
})
var i =3
$('#add').onclick=function(){
  var box =document.createElement('div')
  box.classList.add('box')
  box.innerText = 'box' +(i++)
  $('.container').appendChild(box)
}
</script>
</body>
</html>
//這時候add是可以正常輸出bix3,box4,box5,,,,,,,
但是控制臺輸出的innerText就還是原來是box1,box2,沒有后來增加的了穴张。
因為forEach一開始只給原本就有的做了遍歷细燎，都綁定了事件，后面新增的對象沒有綁定啊皂甘。

代理模式下呢：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="box">box1</div>
   <div class="box">box2</div> 
</div>
  <button id="add">add</button>
<script>
function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$$('.box').onclick = function(){
  console.log(this.innerText)
}
$('.container').onclick=function(e){
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
  }
}                   //代理模式
var i =3
$('#add').onclick=function(){
  var box =document.createElement('div')
  box.classList.add('box')
  box.innerText = 'box' +(i++)
  $('.container').appendChild(box)
}
</script>
</body>
</html>
可正常跟進子元素的變化找颓，同步綁定事件了。沒有綁定事件叮贩，但是都會向父元素冒泡击狮，父元素綁定了事件啊

事件代理很好，不需要重新綁定事件了益老，尤其是懶加載啊彪蓬，或者是子元素會發(fā)生變化啊。

最后編輯于：2017.12.10 10:58:58

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末捺萌，一起剝皮案震驚了整個濱河市档冬，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌桃纯，老刑警劉巖酷誓，帶你破解...
沈念sama閱讀 218,284評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異态坦，居然都是意外死亡盐数，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,115評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門伞梯，熙熙樓的掌柜王于貴愁眉苦臉地迎上來玫氢，“玉大人，你說我怎么就攤上這事谜诫⊙浚” “怎么了？”我有些...
開封第一講書人閱讀 164,614評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵喻旷，是天一觀的道長生逸。經常有香客問我，道長，這世上最難降的妖魔是什么槽袄？我笑而不...
開封第一講書人閱讀 58,671評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任伟阔，我火速辦了婚禮，結果婚禮上掰伸，老公的妹妹穿的比我還像新娘皱炉。我一直安慰自己，他們只是感情好狮鸭，可當我...
茶點故事閱讀 67,699評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布合搅。她就那樣靜靜地躺著，像睡著了一般歧蕉。火紅的嫁衣襯著肌膚如雪灾部。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,562評論 1贊 305
城市分裂傳說
那天惯退，我揣著相機與錄音赌髓，去河邊找鬼。笑死催跪，一個胖子當著我的面吹牛锁蠕，可吹牛的內容都是我干的。我是一名探鬼主播懊蒸，決...
沈念sama閱讀 40,309評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼荣倾，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了骑丸？” 一聲冷哼從身側響起舌仍，我...
開封第一講書人閱讀 39,223評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎通危，沒想到半個月后铸豁，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
沈念sama閱讀 45,668評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡菊碟，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,859評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年节芥，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片框沟。...
茶點故事閱讀 39,981評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡藏古，死狀恐怖，靈堂內的尸體忽然破棺而出忍燥，到底是詐尸還是另有隱情，我是刑警寧澤隙姿，帶...
沈念sama閱讀 35,705評論 5贊 347
?日本核電站爆炸內幕
正文年R本政府宣布梅垄，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏队丝。R本人自食惡果不足惜靡馁，卻給世界環(huán)境...
茶點故事閱讀 41,310評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望机久。院中可真熱鬧臭墨，春花似錦、人聲如沸膘盖。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,904評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽侠畔。三九已至结缚，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間软棺，已是汗流浹背红竭。一陣腳步聲響...
開封第一講書人閱讀 33,023評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留喘落，地道東北人茵宪。一個月前我還...
沈念sama閱讀 48,146評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像瘦棋，于是被迫代替她去往敵國和親眉厨。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,933評論 2贊 355