- 事件流
- 事件处理
- 事件对象
事件流
事件流.png
事件冒泡
和ios 一样，就是事件的传递链，冒泡这里指的是从接受事件的元素开始，一直传递给最外层的文档。
事件处理
事件处理.png
1.HTML事件处理
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script>
function demo() {
alert("hello html事件处理")
}
</script>
2.DOM0 级处理
优点：不需要在HTML中处理
缺点：多个事件会被最后一个事件覆盖掉
<script>
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
alert("hell0 DOM0级事件处理程序1")//覆盖掉
}
btn1.onclick = function () {
alert("hell0 DOM0级事件处理程序2")
}
</script>
3.DOM2级别事件处理,不会覆盖其他事件
<script>
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",function () {
alert("DOM2级别处理程序1")
})
btn1.addEventListener("click",function () {
alert("DOM2级别处理程序2")
})
</script>
IE8以及以下
<script>
var btn1 = document.getElementById("btn1");
if(btn1.addEventListener){
btn1.addEventListener("click" ,function (demo) {
alert("nidaye")
})
//适配ie8 以及以下
}else if(btn1.attachEvent){
btn1.attachEvent("onclikc",function () {
alert("nidaye")
})
}else
{
btn1.onclick = function (demo) {
alert("nidaye")
}
}
</script>
事件对象
事件对象.png
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
<a id="aid" href= "http://www.app-echo.com">echo</a>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event) {
// alert(event.type)
alert(event.target);
// event.stopPropagation();//阻止事件冒泡
}
function showDiv() {
alert("div");
}
function showA(event) {
event.stopPropagation();
event.preventDefault();//阻止默认事件
}
</script>
</body>
