JavaScript事件
页面中接受事件的顺序。
事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)
事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件。
- HTML事件处理:直接添加到HTML结构中
- DOM0级事件处理:把一个函数赋值给一个事件处理程序属性
- DOM2级事件处理
addEventListener(“事件名”,事件处理函数名,布尔值);
true:事件捕获
false:事件冒泡
removeEventListener(“事件名”,事件处理函数名,布尔值);- IE事件处理程序(针对含IE8以下处理)
attachEvent(“事件名”,事件处理函数名,布尔值);
detachEvent(“事件名”,事件处理函数名,布尔值);
<body>
<button type="button" id="test_button" onclick="demo()">按钮</button>
<script>
button_ele = document.getElementById("test_button")
if(button_ele.addEventListener){
button_ele.addEventListener("click",demo);
}else if(button_ele.attachEvent("onclick",demo)){
button_ele.attachEvent("onclick",demo);
}else{
button_ele.onclick=demo();
}
function demo(){
alert("hello");
}
</script>
</body>
事件对象Event
- type: 获取事件类型
- target: 获取事件目标
- stopPropagation(): 阻止事件冒泡
- preventDefault(): 阻止事件默认行为
<body>
<div id="test_div">
<button type="button" id="test_button" onclick="demo()">按钮</button>
<a id="test_a" href="http://www.baidu.com">测试链接</a>
</div>
<script>
button_ele = document.getElementById("test_button");
div_ele = document.getElementById("test_div");
a_ele = document.getElementById("test_a");
if(button_ele.addEventListener){
button_ele.addEventListener("click",bt_demo);
div_ele.addEventListener("click",div_demo);
a_ele.addEventListener("click",a_demo);
}else if(button_ele.attachEvent("onclick",bt_demo)){
button_ele.attachEvent("onclick",bt_demo);
}else{
button_ele.onclick=bt_demo();
}
function bt_demo(event){
alert(event.type);
alert(event.target);
event.stopPropagation();
}
function div_demo(){
alert("事件冒泡");
}
function a_demo(event){
event.stopPropagation();
event.preventDefault();
}
</script>
</body>