【重温JS】巩固基础-day13-事件对象(二)

245 阅读3分钟

这是我参与8月更文挑战的第13天,活动详情查看:8月更文挑战

☆☆☆ 今天的内容(event 事件对象(二)) 重要!! 可以对应用中的一些操作进行优化--☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

用自己的理解, 简单又全面概括基础知识点, 大部分内容为白话文内容, 基础中的基础 方便加深理解!

巩固学习 JavaScript 基础知识, 加深理解记忆, 打牢地基才能筑高楼! 加油

接昨天event事件对象的初次见面, 开始今天的学习吧! 认真对待!!

5、keyCode 属性--键盘事件对象

keyCode 获取按键值   回车键:13

功能键属性 : ctrlKey   altKey shiftKey   返回值是一个布尔值

单独使用功能键,需要在键盘按下时触发

5.1 onkeyup

触发键盘 onkeyup 事件时,如果按住功能键 + 回车键   触发,需要条件:

按住 ctrl + 回车键 发送

document.onkeyup = function (e) {
  var e = e || event // 按住回车键+ctrl 发送
  if (e.keyCode == 13 && e.ctrlKey) {
    alert('发送')
  }
}

5.2 onkeypress

触发键盘 onkeypress 事件时,如果按住功能键 + 回车键   触发,需要条件:

document.onkeypress = function (e) {
  var e = e || event //按住回车键+ctrl 发送
  if (e.keyCode == 10 && e.ctrlKey) {
    alert('发送')
  }
}

6、事件流

当触发某个事件时,事件从子元素向父元素触发 或 从父元素向子元素触发的过程 称为事件流

事件流两种模式 :

  1. 事件冒泡 : 从子元素向父元素触发

  2. 事件捕获 : 从父元素向子元素触发

事件冒泡 :

当触发某个事件时,同样的事件会向父元素触发,这个过程叫做事件冒泡

不是所有的事件都会产生冒泡: onload onbluronfocus

7、阻止事件冒泡的兼容

e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)

8、阻止浏览器默认行为 兼容

默认行为 : 超链接跳转     submit 按钮跳转     选中的图片或文字 默认被拖拽       右键单击菜单显示

e.preventDefault ? e.preventDefault() : (e.returnValue = false)
或
return false

9、事件监听

9.1 如何为一个元素绑定事件??

<input onclick>
obj.onclick = function(){  }

9.2 通过事件监听的方法 为元素绑定事件 :

事件源.addEventListener(事件, function () {})

注意 :事件去掉 on       第三个参数 是一个布尔值 true 或 false  false 默认的 冒泡   true 为捕获

9.3 事件监听好处 : 

1、可以为同样的对象绑定多次同一个事件处理程序   多次触发

2、程序员可以根据监听方法实现 捕获或冒泡 行为


预告: 加油, 追梦人

【预告】: 继续复习事件对象的更多知识点.. 也不能一口吃撑胖子吖..-

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!



更多阅读:

前文更新回顾

【重学 JS】每天学习巩固基础:

【day1】js 初始

【day2】各种运算符

【day3】数据类型

【day4】循环结构 & 条件语句

【day5】函数(重点)

【day6】作用域 & 事件

【day7】对象 & 数组方法总结

【day8】字符串方法 & 部分排序

【day9】Math 对象 & 封装函数

【day10】BOM-浏览器对象模型

【day11】DOM-文档对象模型

【day12】event 事件对象初识(一)

更多期待在路上...任重而道远==-..-==