• JavaScript 事件机制(四)


    JavaScript 事件机制

    1 什么是事件

    JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

    网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

    2 把事件绑定给元素

    事件监听方式(标准方式)

    addEventListener(Event, fn)    (非IE IE9+)  
    attachEvent(Event, fn)  (IE8-)

    btnEle.addEventListener('click', function(){

    }, false) fasle表示 冒泡阶段触发(默认),设置成true,就是捕获阶段触发。

    事件的捕获和冒泡
    捕获阶段: 从祖先元素 到 子元素
    冒泡阶段: 从子元素 到 祖先元素
    事件默认在冒泡阶段触发

    把事件作为元素的方法

    dom.onclick = fn
    

    把事件作为标签的内部属性

    <button onclick="code..">
    

    3 给元素解除事件绑定

    标准方式绑定的事件

    removeEventListener(event, fn)  (IE9+ 非IE)
    detachEvent(Event, fn)   (IE8-)
    

    其他方式绑定

    重新绑定事件,用空的函数 覆盖 前面的
    dom.onclick = function(){}
    

    4 this在事件中的作用

    • 给一组元素绑定事件
    • 在元素内部 通过属性形式 <button onclick="fn(this)"> 此时this表示所在的元素

    5 事件列表

    5.1 鼠标事件

    click        单击左键
    dblclick    双击 左键
    contextmenu    右单击
    mouseover    鼠标悬浮
    mouseout    鼠标移出
    mousedown    鼠标按键按下
    mouseup          鼠标按键抬起
    mousemove    鼠标移动

    mouseenter  鼠标悬停
    mouseleave   鼠标离开

    5.2 键盘事件

    keydown        键盘按键 按下
    keyup        键盘按键 抬起
    keypress     键盘按键 按下 (只有字符按键)  (控制按键不可以 Ctrl shift 上下左右都不行)
    

    5.3 文档事件

    load            加载完成
    unload            文档关闭
    beforeunload     文档关闭 (兼容性好)
    

    5.4 表单事件

    submit        表单提交的时候, 绑定给form元素
    reset        表单重置, 绑定给form元素
    blur        失去焦点
    focus        获得焦点
    change        表单控制的内容改变   通常绑定给 radio checkbox select  如果绑定给输入的input, 必须满足 内容改变和失去焦点才能触发
    select        input 或 textarea  内容被选中的时候触发
    input    输出内容改变 触发

    5.5 图片事件

    abort        图片加载中断
    load        图片加载完成
    error        图片加载错误

    5.6文档事件

    load 绑定给body 绑定给window 绑定给 img 、link、script 文档加载完成
    unload 文档关闭
    beforeunload 文档关闭之前

    5.7其他事件

    scroll        元素内部的内容滚动  适合于有滚动条的元素
    resize        绑定给window, 窗口尺寸发生变化
    

    6 Event对象

    6.1 分类

    Event        
    MouseEvent    
    KeyboardEvent    
    FocusEvent    
    ...................
    

    6.2 属性

    • clientX 鼠标的x坐标

    • clientY 鼠标的Y坐标

    • button 鼠标按键的标示

      值
      0    按了左键
      1    按了滚轮
      2    按了右键
      
    • keyCode 键盘按键的值

    • cancelBubble 阻止事件冒泡 设置为true

    • target 返回触发此事件的元素

    • tyep 返回事件类型

    • timeStamp 返回触发事件的那一刻的时间戳(从页面打开的那一刻开始

    • altKey 返回当事件被触发时,"ALT" 是否被按下。

    • ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。

    • shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。

    6.3 方法

    • stopPropagation() 阻止事件冒泡

    • preventDefault() 阻止元素默认的事

  • 相关阅读:
    CString to char*
    修改mfc中的图标的问题
    MFC Class Wizard要到这里来找
    多文档情形下,窗口的重绘
    64位的ubuntu跑不了32位下编译出来的代码,可是我就是想跑啊
    ubuntu不能执行某个执行文件,这个叫权限不够
    碰到了在ubuntu下不能读windows盘符的问题——ubuntu使用心得
    画个多边形来,CDC
    如果要在mFC客户区添加控件怎么办
    饿汉单例模式实例——取快递
  • 原文地址:https://www.cnblogs.com/wanglecn/p/9475671.html
Copyright © 2020-2023  润新知