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>