• 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() 阻止元素默认的事

  • 相关阅读:
    测试思想-测试设计 史上最详细测试用例设计实践总结 Part2
    测试思想-测试设计 史上最详细测试用例设计实践总结 Part1
    loadrunner 脚本开发-参数化之将内容保存为参数、参数数组及参数值获取Part 2
    loadrunner 脚本开发-参数化之将内容保存为参数、参数数组及参数值获取
    测试思想-测试计划 软件测试方法与测试策略简述
    测试思想-文档评审 关于需求评审
    loadrunner 运行脚本-命令行运行脚本
    loadrunner 运行脚本-Run-time Settings-Browser Enmulation设置详解
    loadrunner 运行脚本-Run-time Settings-ContentCheck简单设置
    python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
  • 原文地址:https://www.cnblogs.com/wanglecn/p/9475671.html
Copyright © 2020-2023  润新知