当前位置:首页 > 开发 > Web前端 > DOM > 正文

dom01

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
dom
摘要: 事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。 事件捕获:即不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。 事件处理程序:1.HTML处理程序 <body> <div id="box"> <input type="button&

事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。

事件捕获:即不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

事件处理程序:1.HTML处理程序

<body>

<div id="box">

    <input type="button"  value="按钮" id="btn" onclick="alert(123)"/>

</div>

</body>

javascript和html耦合在一起,改起来比较麻烦,不建议使用的:

function showMessage(){

    alert("hello word")

}

</script>

</head>

<body>

<div id="box">

    <input type="button"  value="按钮" id="btn" onclick="showMessage()"/>

</div>

2.dom0级事件处理程序

较传统的方式:把一个函数赋值给一个事件爱你的处理程序属性用的比较多的方法    简单     夸浏览器的优势

window.onload=function(){

    var btn2=document.getElementById('btn2');

    btn2.onclick=function(){

        alert('这个是dom0级添加的事件')

    }

// btn2.onclick=null;

}

<input type="button" value="按钮3" id="btn3"/>

 

3.dom2级事件处理程序

dom2级事件定义了两种方法:

用于处理指定和删除事件处理程序的操作

addEventListener()和removeEventListner()

接收三个参数:要处理的事件名,作为事件处理程序的函数和布尔值(false事件冒泡,true事件捕获)

window.onload=function(){

   

    var btn3=document.getElementById('btn3');

    btn3.addEventListener('click',showMessage,false);
  btn3.addEventListener('click',function(){
        alert(this.value)
    },false);
  btn3.removeEventListener('click',showMessage,false); }
<input type="button" value="按钮3" id="btn3"/>

4.IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

接收相同的两个参数:事件处理程序的名称和事件处理程序的函数

不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡

window.onload=function(){

   

    var btn3=document.getElementById('btn3');

   btn3.attachEvent('onclick',showMessage)

}

<input type="button" value="按钮3" id="btn3"/>

5.跨浏览器的事件处理程序

 

function showMessage(e){

      alert(e.type);

  }

  var eventUtil={

          //添加句柄

          addHandler:function(element,type,handler){

              if(element.addEventListener){//dom二级

                  element.addEventListener(type,handler,false);

              }else if(element.attachEvent){//IE

                  element.attachEvent('on'+type,handler);

              }else{//dom0级

                  element['on'+type]=handler;//element.onclick===element['onclick'];

              }

          },



      //删除句柄

          removeHandler:function(element,type,handler){

              if(element.removeEventListener){//dom二级

                  element.removeEventListener(type,handler,false)

              }else if(element.detachEvent){//IE

                  element.detachEvent('on'+type,handler);

              }else{//dom0级

                  element['on'+type]=null;//element.onclick===element['onclick']

              }

          }

      }

<input type="button" value="按钮3" id="btn3"/>

<script>

  var btn3=document.getElementById('btn3');

  eventUtil.addHandler(btn3,'click',showMessage);

  //eventUtil.removeHandler(btn3,'click',showMessage);

</script>

 

dom01

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

推荐文章
编辑推荐
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号