• 事件

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 浏览器的事件模型

    DOM第0级事件模型

    1.event实例

    大多数浏览器当触发事件处理程序时，名为event的类实例作为第一个参数传递到处理程序（IE除外，为window.event）

    处理矛盾的方式：if(!event) event = window.event;

    另外获取目标元素的引用：  var target = (event.target) ? event.target ：event.srcElement;      //IE中为event.srcElement

    2.事件冒泡

    当时间触发后，时间受限传递到目标元素，然后依次传递到各祖先元素，知道<html>元素为止。如果父级元素也为同类型事件建立了处理程序，也调用父元素的处理程序

    3.影响时间传播和语义

    可以在Event实例上以提供的机制来防止事件向上传播。 标准兼容的浏览器使用event实例的stopPropagation()方法，IE中将event实例中名为cancelBubble的属性设置为true.

    DOM第2级事件类型

    DOM第0级的问题在于对于每个元素而言，每次只能注册一个事件处理程序，比如元素被点击后想做两件事，使用两句赋值的方式不能实现。

    需要建立标准事件模型，另外，在DOM元素上建立一个甚至多个事件处理程序时可行的

    1.建立事件 （标准兼容浏览器，非IE的方法）

    不是把函数引用指派到元素属性，而是通过一个元素方法而建立    addEventListener( eventType,listener,useCapture);

    使用的时候：var element=$('#vscar')[0];

    element.addEventListener( 'click',function(){ say('Whee once!') },false);

    element.addEventListener( 'click',function(){ say('Whee twice!') },false);  //由此，可以在一个元素上建立多个事件处理程序

    要注意：在元素上建立多个处理程序可能以随机方式触发

    2.事件传播

    在标准兼容浏览器中，第2级模型不仅提供冒泡阶段，而且提供附加的捕获阶段（这个与冒泡阶段相反，是从最顶层父元素至下直到目标元素）。而这个的控制就在于addEventListener( eventType,listener,useCapture)中的useCapture参数，如果为false则建立冒泡型处理程序，如果为true则建立捕获型处理程序。

    3.诡异的IE事件模型

    IE不支持DOM第2级事件模型，但提供了与标准模型的冒泡阶段很类似的专用接口。

    IE为每个DOM元素定义的方法是attachEvent( eventName，handler )方法。第一个参数是将要附加的事件模型，比如onclick；第二个参数是将被建立为处理程序的函数。

    • jQuery事件模型

    jQuery事件模型最好的地方就在于除了不支持捕获事件外，其他的跟DOM第2级模型类似，而且用同一个API同时支持标准浏览器和IE

    1. 利用jQuery绑定事件处理程序

    bind(eventType,data,listener)            //参数一为时间类型，参数二是调用者提供的数据（将作为event.data），可省略，参数三是方法

    eg.   $('img').bind('click', function(event){ alert( 'Hi! There!' )});

    另外，还有事件指派命名空间。

    例如页面的编辑模式和显示模式  $('#thing1').bind('click.editMode',someListener);  $('#thing1').bind('click.editMode',someListener22);当页面离开编辑模式时应解除所有的绑定，可以利用  $('*').unbind('click.editMode');

    特定的绑定事件： eventType(listener)       支持的命令如下：

    • blur          focus           mousedown         resize       
    • change    keydown      mousemove         scroll
    • click         keypress      mouseout            select
    • dbclick     keyup           mouseover          submit
    • error        load              mouseup             unload

    还提供bind()的特殊版本——one(eventType,data,listener)      是一次性的事件处理程序，一旦执行就自动消除

    2. 删除事件处理程序

    unbind(eventType,listener)  以及  unbind(event)    //根据参数的不同来确定是删除特定的事件监听器还是全部的

    3. Event实例

    安全的Event实例属性

    • altKey
    • ctrlKey
    • keyCode
    • metaKey
    • pageX
    • pageY
    • relatedTarget
    • screenX
    • screenY
    • shiftKey
    • target
    • type
    • which

    4.影响事件传播

    stopPropagation() 防止时间沿DOM树向上传播

    preventDefault()  取消可能引起任何语义操作的时间，（包括<a>的加载href链接、表单提交以及click事件引起的状态切换）

    如果想在停止事件传播的同时取消事件默认行为，可以返回false值

    5.触发事件处理程序

    trigger(eventType) 调用所有已匹配元素的、为传递事件类型而建立的任何事件处理程序。 此命令不会导致事件触发和通过DOM层的传播，因此不能通过event时间获取比如鼠标位置的值

    简便的命令： eventName（）      其中支持的是blur    click    focus      select    submit

    6.其他事件相关命令

    toggle(listenrOdd,listenerEven)        起切换作用的监听器，每当触发click时间就相互切换。 可用于根据元素被点击的次数切换元素的启用状态，譬如按钮

    hover(overListener,ourListener)     在元素上方悬停鼠标指针            这个函数只关心鼠标离开元素的外部区域，而不关心是否进入内部区域的某个元素，减少了mouseover和mouseout的混乱情况

    • 让事件（以及更多）工作起来

    一个在线点菜的例子，可以从源代码的例子（例子可以在我的另一个学习元——“jQuery引荐” 中下载）中看到，这里不再写

    另外，可以看到jQuery强大的选择器功能，页面上的每一个元素都可以通过选择器获得，但是个人感觉前提是页面的布局和div等的层次安排都需要经过精心的设计！

    • 标签：
    • 事件
    • 时间
    • 参数
    • 39
    • 元素
    • 模型
    • 处理
    • 建立
    • 程序
    • event
  • 加入的知识群：
    学习元评论 (0条)

    评论为空
    聪明如你，不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论。
      
暂无内容~~
顶部