zoukankan      html  css  js  c++  java
  • JQuery实践--事件

    通过HTML网页所呈现的界面是异步的和事件驱动的。步骤:

    • 建立用户界面
    • 等待又去的事情发生
    • 做出相应的反应
    • 重复
    1. 浏览器所实现的事件模型
    DOM第0级事件模型

    事件处理程序是通过吧函数实例的引用指派到DOM元素的属性而声明的。
                                                      或HTML的特性。
    当指定到HTML特性上时,匿名函数就会利用特性的值作为函数体而自动创建
    onclick <=> click事件
    onmouseover <=>mouseover事件
    在事件处理程序中,可以利用event参数
    违反了不唐突的JavaScript原则
    每个元素对于任何特定的事件类型,每次只能注册一个事件处理程序

    DOM第2级事件模型 1.建立事件
      通过一个元素方法而建立:能在同一个元素同一个事件多个事件处理程序
      addEventListener(evenType,listener,useCapture)
      evenType:click,mouseover...
      listener:函数引用
      useCapture: 事件传播,捕获阶段

    IE: attchEvent(eventName,handler)
     eventName:onclick,onmouseover...
    JQuery事件模型 提供建立事件处理程序的统一方法
    允许在每个元素上为每个事件建立多个处理程序
    采用标准事件类型名称:click,mouseover
    使用Event实例作处理程序的参数
    对Event实例的最常用的属性进行规范化
    为取消事件和阻塞默认操作提供统一方法
    JQuery不支持捕获阶段


















    在大多数浏览器中,Event的实例作为第一个参数传递到处理程序。但ID把Event实例指派到window对象的名为event属性
    事件捕获:从根到目标元素调用事件处理程序。IE 不支持捕获阶段
    事件冒泡:调用目标元素的事件处理程序,以及父辈的事件处理程序,直到DOM根
    阻止事件冒泡: event.stopPropagation() IE: event.cancelBubble=true
    取消事件的默认语义: 将处理程序的返回值设置为false。  a, form

    1. 利用JQuery把事件处理程序绑定到元素上
    在匹配集的所有元素上建立函数,作为指定事件类型的事件处理程序 bind(eventType,data,listener)

    eventType: 字符串。click,mouseover
                   or click.scope
    data:对象,event.data,可省略
    listener: 函数

    包装集 $('#thing').bind('click.editmode',listener1)
    $('#thing').bind('click.display',listner2)
    $('#thing').unbind('click.editmode')
    从页面上的所有元素删除editmode命名空间里的所有click绑定
    一些快捷方式 blur(listener)
    change
    click
    dbclick
    error
    focus
    keydown
    keypress
    keyup
    load
    mousedown
    mousemove
    mouseout
    mouseover
    mouseup
    resize
    scroll
    select
    submit
    unload
        这种方式无法指定data
    建立事件,并且执行一次就删掉 one(eventType,data,listener)   包装集  
    从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序
    如果不提供参数,则从元素中删除所有的监听程序
    unbind(eventType,listener)
    unbind(eventType)
    eventType:可选
    listener:可选
    包装集 如果省略参数就会删除所有的监听器
    如果函数时匿名的内联函数,则无法删除

















    2. Event对象实例

    altKey Alt, true/false
    ctrlKey Ctrl。 true/false
    data bind(,data,,)
    keyCode keyup,keydown. 都是大写版本。确定大小写可以用shiftKey
    metaKey Meta , true/false
    pageX 鼠标事件。事件相对于页面原地的水平坐标
    pageY 鼠标事件。
    relatedTarget 光标离开或进入的元素
    screenX 相对于屏幕原点的水平坐标
    screenY  
    shiftKey Shift, true/false
    target 那个元素上事件被触发
    type 事件类型
    which 键盘:建的数字编码
    鼠标:按下的是那个鼠标键














    影响事件传播函数:
       stopPropagation() 防止事件沿DOM树向上传播
       preventDefault()取消默认操作事件

       停止事件传播且取消事件的默认行为:处理函数返回false

    3. 在脚本控制下触发事件处理程序

    调用所有已匹配元素的,为已传递事件类型而建立的任何事件处理程序 trigger(eventType) 字符串 包装集 没有传播,event实例很多属性没有值。因为作为普通函数调用
    一些简便方式 blur()
    click()
    focus()
    select()
    submit()
      包装集  
    针对click事件。两个处理函数相互切换 toggle(listenerOdd,listenerEven)   包装集  
    mouseover,mouseout hover(overlistener,outlistener)   包装集  
             
             























  • 相关阅读:
    通向全栈之路——(4)nginx反向代理配置
    通向全栈之路——(3)node环境搭建
    通向全栈之路——(2)服务器安全设置
    通向全栈之路——(1)服务器新增用户及授权
    window.location.href跳转至空白页
    webpack 1.x 学习总结
    win7下使用apache ab 比较测试node与 tomcat
    Enum,Int,String的互相转换
    读写appSettings配置节方法
    SC命令
  • 原文地址:https://www.cnblogs.com/ahMay/p/5728515.html
Copyright © 2011-2022 走看看