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);

                            }

  • 相关阅读:
    Echarts 中当y轴有负数时,让x轴下落在y轴最小值(转载)
    echarts中如何去掉柱状图的横线和竖线(转载)
    echarts 风向 风速曲线
    echarts legend.type scroll 显示问题;渲染错误
    css实现左侧固定宽度,右侧宽度自适应(转载)
    npm 如何查看一个包的版本信息?(转载)
    echart series areaStyle 颜色不显示
    Spark与Hadoop Shuffle对比
    hive中with...as...的用法
    [转]MyBatis
  • 原文地址:https://www.cnblogs.com/pada/p/3663339.html
Copyright © 2011-2022 走看看