betway必威-betway必威官方网站
做最好的网站

在控件的,给页面渲染时间加速

现在的web应用越来越复杂,需要响应各种各样的用户触发事件,因而也就不可避免的,需要给我们的html页面上的dom元素增加事件监听函数.

//阻止冒泡//在控件的 onxxx 事件中调用就可以阻止父控件也响应消息了
DOM.stopBubble = function(e)
{
    //如果传入了事件对象.那么就是非IE浏览器
    if (e && e.stopPropagation) {
        //因此它支持W3C的stopPropation()方法
        e.stopPropagation();
    }
    else {
        //否则,我们得使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}//

我们知道给dom元素绑定事件监听函数的方法有如下3种:
1 : 页面html:

 

复制代码 代码如下:

来自 Dom文档对象模型-2010版.chm

<button onclick=”test();”></button>

<html>
<head>
<title>阻止冒泡--康董</title>
<style>
body{
color:#333;
font-size:12px;
}

2: 页面html:

</style>
</head>
<body>
<p>什么是事件冒泡,通俗的来讲就是  我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br />
在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!
<div id="a">
 <ul id="lia">请单击下面的列表.会触发body事件
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
 </ul>

复制代码 代码如下:

 <ul id="lib">请单下面的列表.不会触发body事件.
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
 </ul>
</div>
<script language="javascript">
document.body.onclick = function(){     //首先为body元素绑定一个单击事件
    alert("BODY事件");                  //单击页面即弹出对话框
}

<button id=”btn”></button>

function att_Event(){                  //为第一组li元素绑定onclick事件   
    var li = document.getElementById("lia").getElementsByTagName("li");
    for(var i=0;i<li.length;i ){
        li[i].onclick = function(){
           alert("Li事件");
        }
    }

Javascript:

}

复制代码 代码如下:

function att_Event_b(){                  //为第二组li元素绑定onclick事件   
    var li = document.getElementById("lib").getElementsByTagName("li");
    for(var i=0;i<li.length;i ){
        li[i].onclick = function(e){
           alert("Li事件");
           stopBubble(e);
        }
    }

document.getElementById(“btn”).onclick = test;

}

3: 页面html:

function stopBubble(e){
    //如果传入了事件对象.那么就是非IE浏览器
    if(e && e.stopPropagation){
        //因此它支持W3C的stopPropation()方法
        e.stopPropagation();
    }
    else{
        //否则,我们得使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}

复制代码 代码如下:

必威官方网站,window.onload = function(){
    att_Event();
    att_Event_b();
}

<button id=”btn”></button>

</script>
</body>
</html>

Javascript:

复制代码 代码如下:

本文由betway必威发布于网页设计,转载请注明出处:在控件的,给页面渲染时间加速

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。