JavaScript事件
一、事件概述
- 什么是事件？
-
事件是文档或者浏览器窗口中发生的，特定的交互瞬间。
-
事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
-
事件是javaScript和DOM之间交互的桥梁。
- 事件模式
- 内联模式（不推荐）
<button onclick="">按钮</button> - 脚本模式（推荐）
脚本模式能将JS代码和HTML代码分离, 符合代码规范.
var box = document.getElementById('box');
添加事件方式一 : 通过匿名函数，可以直接触发对应的代码 (推荐)
box.onclick = function() { //给box节点对象添加点击事件onclick
console.log('Hello world!');
};
添加事件方式二 : 通过指定的函数名赋值的方式 来执行函数
box.onclick = func;
function func() {
console.log('Hello world!');
};
二、事件分类
- 鼠标事件
单击事件 onclick 双击事件 ondblclick
鼠标移入事件 onmouseover 鼠标移出事件 onmouseout
鼠标按下 onmousedown 鼠标弹起 onmouseup
右键 oncontextmonu 鼠标移动事件 onmousemove
窗口滚动 window.onscroll = function(){}
元素滚动 节点 .onscroll = function(){}
页面实际高度 document.documentElement.scrollHeight
滚动距离 document.documentElement.scrollTop
- 键盘事件
键盘按键按下 onkeydown
键盘按键抬起 onkeyup
键盘字符 onkeypress
获取键盘值对应的ASCI值 keyCode
判断ctrl按键是否被按下 e.ctrlkey
判断shift键是否被按下 e.shiftkey
- HTML事件
加载事件 load
卸载 unload
选择 select
修改 change
失去焦点 blur
获取焦点 focus
输入内容 input
滚动 scroll
提交 submit
重置 reset
三、事件源对象（event）
- event相关属性
- 位置属性
offsetX 鼠标离当前元素的X距离
offsetY 鼠标离当前元素的Y距离
clientX 鼠标离网页最左的距离 （不包含不可见部分）
clientY 鼠标离网页最顶部的距离 （不包含不可见部分）
pageX 鼠标离网页最左的距离 （包含不可见部分）
pageY 鼠标离网页最顶部的距离 （包含不可见部分）
screenX 鼠标离屏幕最左部的距离
screenY 鼠标离屏幕最顶部的距离
- 按键属性
ctrlKey 是否按下ctrl键
altKey 是否按下alt键
shiftKey 是否按下shift键
button 0：左键 1：滚轮 2：右键
- 事件触发
type 事件触发类型
target 当前事件触发对象
current target 当前添加事件的对象
- 键盘输入
key 获取当前键盘按下的按键
keyCode 获取当前按下的按键的ASCII码值
charCode 获取按下的字符的ASCII值
四、事件委托
- 什么是事件委托?
事件委托就是把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。 - 事件委托的优点
- 减小内存消耗
- 动态绑定事件
- 实现事件委托
- 确定要添加事件元素的父级元素；
- 给父元素定义事件，监听子元素的冒泡事件；
- 使用 event.target 来定位触发事件冒泡的子元素。
五、事件冒泡和事件捕获
- 事件冒泡和事件捕获概述
- 由网景公司提出，与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。整个过程就像水中的气泡一样，从水底向上运动。
- 由微软公司提出，事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标节点；
- 阻止事件冒泡
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true; //兼容IE的方法
}
}
- 阻止默认行为
- preventDefault()函数
- return false；
- returnValue = false
六、拖拽实现
1.拖拽实现步骤 - onmousedown 鼠标落下事件
- onmousemove 鼠标移动事件
- onmouseup 鼠标弹起事件
<style>
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.onmousedown = function(e){
e = e || event
var x = e.offsetX
var y = e.offsetY
document.onmousemove = function(e){
e = e || event
var X = e.pageX-x
div.style.left = X + 'px'
div.style.top = Y + 'px'
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = false
}
}
</script>
其中需要注意的是需要拖拽的元素必须要脱离标准文档流才能实现拖拽效果，没有脱离标准文档流的话是不能进行拖拽的
七、事件监听器
写法：
obj.addEventListener(type , function , false)
其中type是一个字符串，指的是事件类型，function为一个函数，false代表不执行捕获执行冒泡
obj.removeEventListener(type , fn , false);
移除事件监听器，里面的参数跟事件监听器一样只是里面的函数不同
