zoukankan      html  css  js  c++  java
  • js 事件模型

    1.事件模型

    (1)原始事件模型

    直接给元素绑定事件,只处理当前元素的事件,无事件传递。

    (2)IE事件模型

    冒泡模型

    (3)W3C事件模型

    捕获模型+冒泡模型

    a.捕获阶段

    从document向上(到触发事件的元素方向)传递事件,遇到注册事件就执行。

    b.目标阶段

    到达触发事件的元素位置,执行事件处理函数。

    c.冒泡阶段

    从事件触发元素向document方向上传递事件,玉带注册事件就执行。

    2.event对象

    在W3C规范中,event对像随事件处理函数传入,Chrome FireFox Opera Safari IE9及IE+都支持。IE8及IE8-,event是window对象的一个属性。考虑到兼容性时,如下代码:

    var event = event || window.event;

    event对象属性:

    (1)screenX/screenY(+W3C +IE)

    距离显示器左/上位置。

    (2)clientX/clientY(+W3C +IE)

    距离可视区域左/上位置。

    (3)pageX/pageY(-W3C -IE)

    距离页面左/上位置。

    (4)offsetX/offsetY(-W3C +IE)

    距离具有定位属性的父元素的左/上位置。

    (5)target(+W3C -IE),srcElement(-W3C +IE)

    触发事件的目标元素。

    (6)currentTarget(+W3C -IE)

    当前处理事件的元素。

    (7)preventDefault()(+W3C -IE)

    阻止事件的默认行为。

    (8)stopPropagation()(+W3C -IE) cancelBubble(-W3C +IE)

    阻止事件捕获和冒泡。

      <style type="text/css">
        #container{
          height: 1500px;
          background-color: #e8bcbc;
          position: relative;
        }
        #footer{
          position: absolute;
          top:1000px;
          width:100%;
          height:300px;
          background-color: #94bb94;
        }
        </style>
      <script>
        window.onload = function(){
          var container = document.getElementById('container');
          var footer = document.getElementById('footer');
          container.addEventListener('click',function(event){
            var event = event || window.event;
            console.log('screenX:'+event.screenX+';screenY:'+event.screenY);
            console.log('clientX:'+event.clientX+';clientY:'+event.clientY);
            console.log('PageX:'+event.pageX+';PageY:'+event.pageY);
            console.log('offsetX:'+event.offsetX+';offsetY:'+event.offsetY);
            console.log('target:'+event.target);
            console.log('srcElement'+event.srcElement);
            console.log('currentTarget:'+event.currentTarget);
    
          },false);
        }
      </script>

     3.事件绑定与解除

    (1)原始事件

    绑定:

    elem.type = observer;

    解除:

    elem.type = null;

    (2)IE

    绑定:

    elem.attachEvent('type',observer);

    解除:

    elem.detachEvent('type',observer);

    (3)W3C

    绑定:

    elem.addEventListener('type',observer,isUseCapture);

    解除:

    elem.removeEventListener('type',observer,isUseCapture);

  • 相关阅读:
    通达OA二次开发 工作流表单中关联查询另外一个工作流方法(源代码)
    SpringMVC+ajaxFileUpload上传图片 IE浏览器弹下载框问题解决方式
    Javascript正则中的exec和match
    Java中byte转int的方法
    推断php操作mysql(添删改查)是否成功
    关于人工智能的一些思考~
    Tomcat的虚拟主机的配置
    最近遇到的若干技术问题
    2015年工作中遇到的问题:11-20
    2015年工作中遇到的问题:11-20
  • 原文地址:https://www.cnblogs.com/fe-huahai/p/5642092.html
Copyright © 2011-2022 走看看