高级事件

注册事件

  • 给元素添加事件成为注册事件或者绑定事件
  • 传统方式和方法监听注册方式

    • 传统注册

      • 利用 on 开头的事件 onclick

      <button onclick = alert("hi~")></button>

      btn.onclick = function(){}

      • 特点:注册事件的唯一性

      • 同一元素同一事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

    • 方法监听注册方式

      • w3c 标准 推荐方式

      • addEventListener() 是一个方法

        addEventListener(type, listener[, useCapture])
        • type 事件类型字符串,比如click mouseover 注意这里不要带on

        • listener 事件处理函数,事件发生时,会调用该监听函数

        • 可选参数,是一个布尔值,默认是false

        • attachEvent 事件监听方式

          • ie9 之前的版本支持
          • 生产版本一般不使用
      • IE9 之前的 IE 不支持此方法

      • 同一个元素同一个事件可以注册多个监听器

      • 按注册顺序依次执行

  • 注册事件兼容性解决方法

    • 先照顾大多数浏览器,再处理特殊浏览器

删除事件 解绑事件

  • 删除事件的方式

    • 传统注册方式

      eventTarget.onclock = null;
    • 方法监听注册方式

      eventTarget.removeEventListener(type, listener[, useCapture])
      eventTarget.detachEvent(eventNameWithOn, callback)
  • 删除事件的兼容性解决方案

DOM 事件流

  • 描述的是从页面中接收事件的顺序
  • 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
  • 三个阶段

    • 捕获阶段
    • 当前目标阶段
    • 冒泡阶段
  • 注意事项

    • js 代码中只能执行捕获或者冒泡其中的一个阶段‘
    • onclick 和 attachEvent 只能得到冒泡阶段
    • addEventListener(type, listener[, useCapture]) 第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在冒泡阶段调用事件处理程序

事件对象

  • event即为一个事件对象,可看作为一个形参
  • 事件对象只有有了事件才会存在,是系统创建的,不需要传递参数
  • 事件对象是我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息
  • 事件对象可以自己命名,比如 event ent 等等
  • 事件对象的兼容性问题 ie 678 通过 window.event
  • 事件对象的常见属性和方法

    • e.target

      • 返回触发事件的对象 标准
    • e.srcElement

      • 返回触发事件的对象 非标准
    • e.type

      • 返回事件的类型 比如 click mouseover 不带 on
    • e.cancelBubble

      • 该属性阻止冒泡 非标准 ie6-8 使用
    • e.returnValue

      • 该属性阻止默认事件(默认行为) 非标准 ie6-8 使用 比如不让链接跳转
    • e.preventDefault()

      • 该方法阻止默认事件(默认行为) 标准 比如不让跳转
    • e.stopPropagation()

      • 阻止冒泡

阻止冒泡事件

  • 阻止事件冒泡的两种方式

    • 事件冒泡:开始时由最具体的元素接受,然后逐级向上传播到 DOM 最顶层节点

    • 标准写法

      • 利用事件对象里面的 stopPropagation() 方法
    • 非标准写法

      • IE6-8 利用事件对象 cancelBubble 属性

事件委托

  • 事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。生活中有如下场景
  • 咱们班有100个学生,快递员有100个快递,如果一个个的送花费时间较长。同时每个学生领取的时候,也需要排队领取,也花费时间较长,何如?

解决方案∶快递员把10个快递,委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。

优势︰快递员省事,委托给班主任就可以走了。同学们领取也方便,因为相信班主任。

  • 事件委托又称事件代理,在jQuery 里面成为事件委派

    • 事件委托的原理

      • 不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
  • 事件委托的作用

    我们只操作了一次 DOM,提高了程序的性能

常用的鼠标事件

常用的鼠标事件

  • 禁止使用鼠标右键菜单

    • contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单

    document.addEventListener("contextmenu", function(e){	
    	e.preventDefault();
    })

  • 禁止鼠标选中

    document.addEventListener("selectstart", function(e){
    	e.preventDefault();
    })

  • 鼠标事件对象

    • event 对象代表事件的状态,跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。

    • e.clientX: 返回鼠标相对于浏览器窗口可视区的 X 坐标

    • e.clientY: 返回鼠标相对于浏览器窗口可视区的 Y 坐标

    • e.pageX: 返回鼠标相对于文档页面的 X 坐标 ID9+ 支持

    • e.pageY: 返回鼠标相对于文档页面的 Y 坐标 ID9+ 支持

    • e.screenX: 返回鼠标相对于电脑屏幕的 X 坐标

    • e.screenY: 返回鼠标相对于电脑屏幕的 Y 坐标

    • 案例:移动的天使

      • 鼠标不断的移动,使用鼠标移动事件:mousemove - 在页面中移动,给 document 注册事件
        • 图片要移动距离,而且不占位置,我们使用绝对定位即可
        • 核心原理∶每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x和y坐标做为图片的top和left值就可以移动圄片 ## 常用的键盘事件
  • onkeyup: 某个键盘按键被松开时触发

  • onkeydown: 某个键盘按键被按下时触发

  • onkeypress: 某个键盘案件被按下时触发 但是它不识别功能键 比如 ctrl shift 箭头等

  • 键盘事件对象

  • ASCII 表

    • keyCode

    • keyup和keydown 事件不区分字母大小写 a 和 A 得到的都是 65

    • keypress 事件 区分字母大小写

    • 案例

      • 按下 s 使得文本框获得焦点

      • 模拟京东快递单号查询单号

        • 注意:keydown 和 keypress 在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中

BOM 浏览器对象类型

BOM 概述

什么是 BOM

  • BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window
  • BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
  • BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是 Netscape 浏览器标准的一部分。

BOM 的构成

  • BOM 比 DOM 更大,它包含 DOM。

  • window 对象是浏览器的顶级对象,它具有双重角色。

    • 它是 JS 访问浏览器窗口的一个接口。
    • 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
    • 在调用的时候可以省略 window,前面学习的对话框都属于window对象方法,如 alert()、prompt()等
    • 注意:window下的一个特殊属性 window.name
  • window 对象的常见事件

    • onload
      • 最好使用addEventListener
    • 窗口加载事件
      • document.addEventListener('DOMContentLoaded',function(){})

        • DOMContentLoaded 事件触发时,当且仅当 DOM 加载完成,不包括样式表,图片,flash等
    • 调整窗口大小事件
      • resize
  • 定时器

    • 两种定时器
      • setTimeout()

        • setTimeout(调用函数, [延迟的毫秒数])
        • setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数
        • window 在调用的时候可以省略
        • 延时时间单位为毫秒,但是可以省略,省略默认是 0
        • 调用函数可以直接写函数,也可以写函数名
        • 页面中可能有很多的定时器,我们经常给定时器加标识符
        • 回调函数 callback()
      • setInterval(调用函数, 重复时间)

        • window 可以省略
        • 这个调用函数可以直接写函数,或者写函数名或者采取字符串"函数名()"三种形式
        • 间隔的毫秒省略默认是0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数
        • 因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
    • 停止 setTimeout() 定时器
    • window.clearTimeout(timeout)
  • JS执行机制

    • JS 是单线程
      • JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 JavaScript 这门脚本语言诞生的致命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。
      • 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样导致的问题是:如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。
    • 同步和异步
      • 为了解决这个问题,利用多核 CPU 的计算能力,HTML 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步。

      • 同步

        • 前一个任务结束之后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。

        • 同步任务

          • 同步任务都在主线程上执行,形成一个执行栈
      • 异步

        • 做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。

        • 异步任务

          • JS 的异步是通过回调函数实现的
          • 1、普通事件,如 click、resize 等
          • 2、资源加载,如 load、error 等
          • 3、定时器,包括 setInerval、setTimeout 等
          • 异步任务相关回调函数添加到任务队列中(任务队列也称消息队列)
    • JS 执行机制
      • 先执行执行栈中的同步任务。
      • 异步任务(回调函数)放入任务队列中。
      • 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
      • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)。
  • Location

    • 什么是 location 对象
      • window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL。因为这个属性返回的是一个对象,所以我们将这个对象也成为 location 对象。
    • URL
      • 统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
      • protocol://host[:port]/path/[?query]#fragment
    • location 对象的属性
      • location.href

        • 获取或者设置 整个 URL
      • location.host

        • 返回主机(域名)
      • location.port

        • 返回端口号 如果未写返回 空字符串
      • location.pathname

        • 返回路径
      • location.search

        • 返回参数
      • location.hash

        • 返回片段 #后面内容 常见于链接 锚点
    • location 对象方法
      • location.assign()

        • 跟 href 一样,可以跳转页面(也称重定向页面)

          • 记录浏览历史,可以实现后退功能
      • location.replace()

        • 替换当前页面,因为不记录历史,所以不能后退页面

          • 不记录历史,所以不能后退
      • location.reload()

        • 重新加载页面,相当于刷新按钮或者 F5 如果参数为 true 强制刷新 CTRL + F5
    • history 对象
      • back()

        • 可以后退功能
      • forward()

        • 前进功能
      • go(参数)

        • 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退一个页面