- 事件冒泡
A结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上) - 事件捕获
A 结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素。(自顶向下)
B IE没有事件捕获 - 触发顺序:先捕获,后冒泡
- focus, blur, change, submit, reset, select等事件没有冒泡
- 取消冒泡
A: w3c标准event.stopPropagation()但不支持ie9一下
B: IE独有event.cancelBubble = true
function stopBulle(event){
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble = true
}
}
- 阻止默认事件
A: return false
B: event.preventDefault() w3c标准ie 9一下不兼容
C: event.returnValue = false - 事件委托
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script>
var ul = doucment.getElementByTagName('ul')[0]
ul.onclick = function(e){
var event = e||window.event
var target = event.target || event.srcElement
console.log(target.innerText)
}
</script>