zoukankan      html  css  js  c++  java
  • DOM事件处理

    1.事件处理器(event handler)

       onsubmit,onchange,onfocus,onblur,onmouseover,onmouseout,onmousedown,onmousedown,ontouchstart,ontouchend,ontouchmove,orientationchange......

      形式: eg.为按钮元素添加事件处理:      var btn = getElementById('btn'); 

                         btn.onclick = function()  {

                                  //do something...... 

                                 };

      局限性:对特定类型事件只能设置一个事件处理函数

    2.事件监听器(event listener)

      IE8及以前:attachEvent

      标准DOM:addEventListener

      (1)不传参:

          eg.1.事件处理函数: function dosth (){}

             2.事件监听:var btn = getElementById('btn');

                  btn.addEventListener('click',dosth,false);

      (2)传参(将事件处理函数嵌套在匿名函数中):

          eg. 1.事件处理函数:function dosth ( a , b ){}

            2.事件监听:var btn = getElementById('btn');

                  btn.addEventListener('click',function(){

                                        dosth ( i , j ); 

                                      },false);  //false:不启动捕获模式(为方便理解,应先了解DOM事件传递)

          与事件处理器区别:1.同类型事件可以添加多个事件监听器

                   2.不需要用等号赋值

                   3.需要兼容性处理:    var btn = getElementById('btn');

                                if  (btn.addEventListener)

                              {

                                  btn.addEventListener('click',function(){

                                        dosth ( i , j ); 

                                      },false);

                              }

                              else{

                                  btn.attachEvent('on'+click,function(){

                                        dosth ( i , j ); 

                                      },false);

                              }

                   4.可解除绑定:if  (btn.removeEventListener)

                            {

                                btn.removeEventListener('click',function(){

                                        dosth ( i , j ); 

                                      },false);

                            }

                            else{

                                btn.detachEvent('click',function(){

                                        dosth ( i , j ); 

                                      },false);

                            }

  • 相关阅读:
    How to debug with IntelliJ IDEA + Grails 2.3.x (转)
    Lucene教程具体解释
    html中滚动栏的样式
    centos下ant的安装
    qt的资源替换搜索QDir具体解释
    strtok和strtok_r
    文件读写、游标
    Rational Rose 2007 &Rational Rose 2003 下载及破解方法和汉化文件下载
    算法6-5:哈希表应用之集合
    javaEE jdbc编程步骤
  • 原文地址:https://www.cnblogs.com/pada/p/3663339.html
Copyright © 2011-2022 走看看