JavaScript事件
事件举例
1.onmouseout和onmouseover
//鼠标经过“World”,鼠标移出“Hello”
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
function onOver(ooj){
ooj.innerHTML="Hello";
}
function onOut(ooj){
ooj.innerHTML="World";
}
</script>
2.文本框内容改变
<form>
<input type="text" onchange="changeDemo(this)">
</form>
<script>
function changeDemo(bg){
alert("内容改变");
}
</script>
//或直接写
<form>
<input type="text" onchange="alert('内容改变')">
</form>
3.文本框选中
<form>
<input type="text" onselect="changeDemo(this)">
</form>
<script>
function changeDemo(bg){
bg.style.background="red";
}
</script>
事件流
1.事件流:描述页面接受事件的顺序
2.事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素(文档)
3.事件捕获:最不具体的结点先接收文件,而最具体的结点是最后接收事件
事件处理
1.HTML事件处理
缺点:修改繁琐
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
function demo(){
alert("hello world");
}
</script>
2.DOM0级事件处理
缺点:事件会被覆盖
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){alert("Hello world1")};//会被覆盖
btn.onclick=function(){alert("Hello world2")};
btn.onclick=null;//清除当前事件
</script>
3.DOM2级事件处理
addEventListener(“事件名”、“事件处理函数”、“布尔值”)
true(事件捕获)
false(事件冒泡)
特点:不会被覆盖,处理方便,书写复杂
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",demo);
btn.addEventListener("click",bye);//不会覆盖,依次处理
btn.removeEventListener("click",bye);//移除
function demo(){
alert("hello world");
}
function bye(){
alert("good bye");
}
</script>
4.IE事件处理(IE8及以下)
attachEvent
detachEvent
兼容IE8及以下浏览器
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
</div>
<script>
var btn=document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{
btn.onclick=demo();
}
function demo(){
alert("hello");
}
</script>
事件对象
事件对象event:
1.type:获取事件类型
2.target:获取事件目标
3.stopPropagation():阻止事件冒泡
4.preventDefault():阻止事件默认行为
<div id="div">
<button id="btn" onclick="demo()">按钮</button>
<a href="http://www.baidu.com" id="aid">百度一下</a>
</div>
<script>
document.getElementById("btn").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElementById("aid").addEventListener("click",showA);
function showType(event){
alert(event.type);//"click"类型
event.stopPropagation();//阻止div事件冒泡
}
function showDiv(){
alert("div");
}//会出现事件的冒泡
function showA(event){
event.stopPropagation();
event.preventDefault();//阻止默认事件执行
}
</script>