对象的绑定
- 使用
对象.事件 = 函数的形式绑定响应函数，只能同时为一个元素的一个事件绑定一个响应函数
- 不能绑定多个，如果绑定多个，则后面会覆盖前面的
- 这是DMO0的写法
addEventListener()
- DOM2为我们提供了一个新的绑定元素响应函数
- 参数：
- 第一个，事件的字符串，不要
on
- 第二个，回调函数，当事件触发时该函数会被调用
- 第三个，是否在捕获阶段触发事件，布尔值，一般是默认
false
- 可以同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数会按照函数的绑定属性执行
-
addEventListener()中的this是绑定事件的对象
- IE8及以下浏览器不支持
attachEvent()
- 在IE8中可以使用
attachEvent()来绑定事件函数
- 参数：
- 这个方法也可以同时为一个事件绑定多个响应函数，不同的是，它是后绑定先执行，执行顺序和
addEventListener()相反
-
attachEvent()中的this是window
- 其他浏览器不支持
两个方法的兼容性函数
- 定义一个函数，用来为指定元素绑定响应函数
-
addEventListener()中的this是绑定事件的对象
-
attachEvent()中的this是window
- 需要统一两个方法
this
参数：
-
obj要绑定事件的对象
-
eventStr事件的字符串
-
callback回调函数
代码：
function bind(obj, eventStr, callback){
if(obj.addEventListener){
obj.addEventListener(eventStr, callback, false);
}else{
obj.attachEvent("on"+eventStr, function(){
callback.call(obj);
});
}
}
鼠标滚轮滚动事件
onmousewheel
-
onmousewheel鼠标滚动事件，会在滚轮滚动时触发
- 火狐不支持该属性
DOMMouseScroll
- 在火狐中需要使用来绑定滚动事件
- 该事件需要通过
addEventListener()函数来绑定
wheelDelta
-
e.wheelDelta可以获取鼠标滚轮滚动的方向
- 向上滚：正数120，向下滚：负数-120
- 火狐中不支持
detail
- 在火狐中使用
e.detail来获取滚动的方向
- 向上滚：正数，向下滚：负数
键盘事件
- 按键事件一般都会绑定给一些可以获取到焦点的对象或者是
document
keypress
- 当键盘的某个键被按下时触发,不能识别功能键
- 保存的是按键的ASCII码值
- 区分字母的大小写
onkeydown
- 按键被按下
- 保存的是按键的虚拟键码
- 不区分字母的大小写
- 对于
onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
- 当
onkeydown连续触发时，第一次和第二次之间会间隔会稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。
onkeyup
keyCode
-
e.keyCode事件来获取按键的编码
- 可以通过它判断那个按键被按下
- 除了keyCode，事件对象中还提供以下属性
altKeyctrlKeyshiftKey- 可以用上面三个属性来判断
alt ctrl 和shift是否同时按下
- 如果按下则返回
true,否则false
键盘移动DIV
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>演示</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
document.onkeydown = function (event) {
event = event || window.event;
let speed = 10;
if(event.ctrlKey)
{
speed = 50;
}
var box = document.querySelector("#box")
switch (event.keyCode) {
case 37://左移
box.style.left = box.offsetLeft - speed + 'px';
break;
case 38://上移
box.style.top = box.offsetTop - speed + 'px';
break;
case 39://右移
box.style.left = box.offsetLeft + speed + 'px';
break;
case 40://下移
box.style.top = box.offsetTop + speed + 'px';
break;
}
}
}
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
提供CDN加速