Javascript--事件
异步回调:
一个Dom元素触发某个特定事件的时候,你可以指派一个回调函数来处理它,也就是说,你可以为需要执行的代码提供一个引用,并且让浏览器处理一切细节.
异步回调示例如下:
<script type="text/javascript"> window.onload = loaded; function loaded(){ document.write("document is loaded!"); } </script>
事件阶段:
Javascript事件在两个阶段中执行:捕获和冒泡.
一旦元素触发了事件,那么允许处理事件元素和顺序都有很大的不同.
代码:
<body onclick="bodyclick()"> <div onclick="divclick()"> <a href="#" onclick="aclick()">Click Me!</a> </div> <script type="text/javascript"> function aclick(){ appendtxt("a is clicked"); } function divclick(){ appendtxt("div is clicked"); } function bodyclick(){ appendtxt("body is clicked"); } function appendtxt(value){ var div = document.createElement("div"); div.innerText=value; document.body.appendChild(div); } </script> </body>
当用户点击了超级链接a之后,结果如下:
事件捕获有两种方式,为何此处仅仅出现了冒泡阶段的事件呢?原因是我们现在是通过onevent这种传统绑定方式来绑定事件的.这种方式只支持事件冒泡,而不支持捕获.
传统事件绑定方式
优点:
1.使用传统方法最大的优点在于非常简单和稳定,可以确保在不同的浏览器中运作一致
2.处理事件时,this关键字引用的是当前元素
缺点:
1.传统方法只会在事件冒泡中运行,而非捕获和冒泡
2.一个元素一次只能绑定一个事件处理函数
3.事件对象参数仅非IE浏览器参数可用
还有一种事件绑定方式为DOM绑定:W3C.它为每个dom元素的函数出现并带有3个参数:
1.事件的名称
2.处理事件的函数
3.一个启用或禁用事件捕获的布尔标记
例子:
document.getElementById("a").addEventListener('click','aclick',false);W3C绑定优缺点:
优点:
1.该方法同时支持事件处理的捕获和冒泡阶段,事件阶段取决于addEventListener最后的参数设置:true(捕获),false(冒泡)
2.在事件处理函数内部,this关键字指向当前元素
3.事件对象总是可以通过处理函数的第一个参数获取
4.可以为同一个事件绑定你所希望的多个事件,并且不会覆盖先前绑定的事件
缺点:
1.不支持IE,必须用attachEvent函数代替
示例:
<body>
<div id="dv">
<a href="#" id="a">Click Me!</a>
</div>
<script type="text/javascript">
window.onload=function(){
document.getElementById("a").addEventListener("click",aclick,true);
document.getElementById("dv").addEventListener("click",divclick,true);
document.body.addEventListener("click",bodyclick,true);
}
function aclick(){
appendtxt("a is clicked");
}
function divclick(){
appendtxt("div is clicked");
}
function bodyclick(){
appendtxt("body is clicked");
}
function appendtxt(value){
alert(value);
}
</script>
</body>此时,事件是在捕获的阶段被捕捉到,当在addEventListener中设置为false时,即可在冒泡阶段捕获
此外,还有一种DOM绑定方式:IE.
例子:
document.getElementById("a").attachEvent('onclick','aclick');优点:
1.可以为同一个元素绑定所希望的多个事件,同时并不会覆盖先前绑定的事件
缺点:
1.IE仅支持事件的冒泡阶段
2.事件监听函数函数内的this指向的是Window对象,而不是当前的元素
3.事件对象仅存在于window.event参数中
4.事件必须以onevent形式来命名,例如:onclick,而不是click
5.仅IE可用
示例代码:
<body>
<div id="dv">
<a href="#" id="a">Click Me!</a>
</div>
<script type="text/javascript">
window.onload=function(){
document.getElementById("a").attachEvent("onclick",aclick);
document.getElementById("dv").attachEvent("onclick",divclick);
document.body.attachEvent("onclick",bodyclick);
}
function aclick(){
appendtxt("a is clicked");
}
function divclick(){
appendtxt("div is clicked");
}
function bodyclick(){
appendtxt("body is clicked");
}
function appendtxt(value){
var div = document.createElement("div");
div.innerText=value;
document.body.appendChild(div);
}
</script>
</body>
取消事件冒泡:
window.event.cancelBubble=true;
阻止浏览器的默认行为:
对于大部分事件,都会发生默认行为,例如:点击a,会将你带入到指定的页面上,这是浏览器的默认行为,无论是在冒泡阶段还是在捕获阶段,都会发生.
就算阻止事件冒泡,或者完全没有绑定事件,浏览器还是会执行这些行为.如何阻止浏览器的默认行为呢?具体见以下代码:
方法1:
window.event.returnValue=false;方法2:
<a href="default.htm" onclick='return false;'>Default</a>
