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

                            }

  • 相关阅读:
    js实现单张或多张图片持续无缝滚动
    h5 video标签在ios8,9无法设置静音
    使用async await通过for循环在图片onload加载成功后获取成功的图片地址
    div元素下的图片不能置顶解决办法
    setInerval实现图片滚动离开页面后又返回页面时图片加速滚动问题解决
    纯css实现单张图片无限循环无缝滚动
    nodejs的xlsx模块批量解析与导出excel数据表简单使用
    js获取文件后缀名方法
    nodejs对字符串进行base64转换和解析
    js中如果遇到低版本安卓设备调用setTimeout不生效解决办法
  • 原文地址:https://www.cnblogs.com/pada/p/3663339.html
Copyright © 2011-2022 走看看