事件的组成
- 事件源
- 事件类型
- 事件处理函数
事件的绑定方式
1、使用on绑定事件(注册事件)
当同一件事源绑定同一个事件类型的时候,那么这个事件只能触发一次(触发绑定最后的那一次)
2、监听事件
事件源.addEventListener(‘事件类型’,事件处理函数),ie8以下版本不支持
先监听后执行(从前往后执行)
3、事件源.attchEvent(‘事件类型’,事件处理函数) ie8以下支持
先监听后执行(从后往前执行)
将兼容性判断,封装成函数
function bindEvent(ele, type, fn) {
//做兼容判断
if ((ele, addEventListener)) {
ele.addEventListener(type, function() {
fn();
});
} else {
ele.attachEvent(type, function() {
fn();
});
}
bindEvent(btn, "click", fun); //这里可以改变事件类型
function fun() {
console.log("鼠标点击事件");
}
}
鼠标相关的对象信息
1、button——记录鼠标的键
值:1(表示左键)
值:2(表示滚轮)
值:3(表示右键)
2、offsetX/offsetY——获取光标在这个元素的位置
3、clientX/clientY——获取光标 在浏览器可视窗口的位置
4、screenX/screenY——获取光标在电脑屏幕的位置
5、pageX/pageY——获取光标 在页面的位置
简单案例1:实现简单拖拽
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background: salmon;
position