Event 事件对象的概念
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
Event对象相关属性
event.clientX 当前鼠标的x轴的坐标
event.clientY 当前鼠标的y轴的坐标
对象.clientWidth 当前对象的宽度 不包含左右边框
对象.clientHeight 当前对象的高度 不包含上下边框
对象.offsetWidth 当前对象的宽度 包含左右边框
对象.offsetHeight 当前对象的高度 包含上下边框
对象.offsetLeft 当前层距离左侧边缘距离
对象.offsetTop 当前层到浏览器顶端的距离
event.keyCode 获取键盘码
注意:
获取event的对象需要兼容多种浏览器,现在event的对象的获取基本上就event和window.event两种写法,所以我们一般在使用的时候采用兼容性写法
var event = event||window.event;
Event对象相关方法
event.stopPropagation() 阻止事件冒泡的方法
event.preventDefault() 取消事件的默认操作
鼠标跟随
鼠标跟随的操作是当鼠标移动的时候,div层跟随着鼠标移动,
原理:当鼠标移动的时候鼠标的坐标一直在改变,于此同时,我们同时修改div层的left值和top值让它跟鼠标的坐标一致,就达到了跟随的效果,
知识点:
1. div设置绝对定位,不然无法移动
2. 鼠标移动事件,获取鼠标的坐标
3. style属性修改div的偏移量即可
**拖拽 **
鼠标拖拽:当我们在一个div上按下鼠标,鼠标移动的过程中,div层跟随者我们的鼠标移动,
当鼠标松开,div盒子停止运动,再次点击移动,重复上面的运动,这个过程就类似于一个拖拽的效果。
知识点:
1. 鼠标按下事件,鼠标移动事件,鼠标释放事件
2. 获取div盒子的偏移量,以及鼠标异动前后坐标
3. 根据偏移量和坐标计算移动后div的left值和top值
事件绑定的三种方式
html
事件绑定的三种方式:
DOM0级事件绑定程序:
1)html事件处理程序,直接在html中绑定js的事件,但是这种会导致代码不易读,造成代码耦合性
<button οnclick=”add()”>点击</button>
<script type=”text/javascript”>
function add(){
}
</script>
2)先获取绑定的对象,然后在js中直接给对象设置事件属性
<button id=“btn”>点击</button>
<script type=”text/javascript”>
var btn = document.getElementById(“btn”);
btn.onclick = function(){
alert(“点击”);
}
</script>
html
3)DOM2级事件绑定:
用到的是addEventListener(事件名,函数名)函数来进行调用的,可以使用removeEventListener(事件名,函数名)进行删除,
但是不能删除绑定匿名函数的方法
什么是事件委托
事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到
父元素上寻找作出相应。
事件委托的优点
可以节省资源空间,减少事件的调用,而且节省代码,减少代码冗余。
随时可以添加子元素,添加的子元素会自动有相应的处理事件。