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

  • 相关阅读:
    把EXE可执行文件等作为资源包含在Delphi编译文件中
    在DBGrid增加一列CheckBox(而非DBCheckBox)
    TCanvas 类属性及方法
    Windows RPC
    Meteor入门
    IntelliJ IDEA 开发scala
    Web前端开发实用的Chrome插件
    Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试
    Ruby入门--Linux/Windows下的安装、代码开发及Rails实战
    IntelliJIDEA Getting+Started+with+Spring+MVC,+Hibernate+and+JSON
  • 原文地址:https://www.cnblogs.com/fe-huahai/p/5642092.html
Copyright © 2011-2022 走看看