这是我参与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、事件流
当触发某个事件时,事件从子元素向父元素触发 或 从父元素向子元素触发的过程 称为事件流
事件流两种模式 :
-
事件冒泡 : 从子元素向父元素触发
-
事件捕获 : 从父元素向子元素触发
事件冒泡 :
当触发某个事件时,同样的事件会向父元素触发,这个过程叫做事件冒泡
不是所有的事件都会产生冒泡: onload
、 onblur
、 onfocus
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】每天学习巩固基础:
更多期待在路上...任重而道远==-..-==