day11 事件（鼠标事件、键盘事件、事件流、阻止冒泡、阻止浏览器默认）

目录

一、事件与事件对象

二、小老虎跳的案例

三、鼠标事件对象的属性

四、键盘事件对象

五、事件流

六、阻止浏览器的默认行为

---

一、事件与事件对象

事件：对某个元素的某种操作

事件的三要素：事件元素，事件类型 [事件对象]

事件对象的作用：提供相关事件类型的属性和方法

注意事项：事件对象的产生必须有事件

事件对象：当某个事件触发时产生的现象，就是事件对象

事件对象的兼容：var e = evt || event

二、小老虎跳的案例

//元素要在页面发生位移，必须要给一个position。

//元素的移动实质是元素left和top的改变

<script>
    var mDiv=document.getElementById("box")
    document.onclick=function(evt){
        mDiv.style.top=mDiv.offsetTop+200+'px'
    }
</script>

三、鼠标事件对象的属性

坐标属性

//page：针对于当前页面的左顶点，常用

e.pageX/e.pageY

//client针对于局部可视窗口的左顶点

e.clientX/e.clientY

//offset：针对父元素的左顶点，用于拖拽

e.offsetX/e.offsetY

图片跟随鼠标移动：

1.鼠标提供坐标->鼠标事件可以提供坐标

2.一个二元素要在页面移动修改的是left和top

3.将鼠标坐标的x赋值给元素的left，y赋值给元素的top

4.onmousemove

<script>
    var mDiv=document.getElementById('div')
    document.onmousemove=function(evt){
        var e=evt||event;
        mDiv.style.left=e.pageX-mDiv.offsetWidth/2+'px'
        mDiv.style.top=e.pageY-mDiv.offsetHeight/2+'px'
    }
</script>

四、键盘事件对象

键盘事件对象的事件源通常是document

onkeyup：键盘弹起的时刻出发

onkeydown：键盘按下的时刻触发

onkeypress：生成一个字符时，触发事件

键盘事件对象

获取录入的asc码值：e.keycode

兼容性获取录入asc码值

key=e.keyCode || e.which || e.charCode;

console.log(String.fromCharCode(key))

常用asc码值：10： crtl+回车

e.ctrlKey：判断ctrl是否被按下,只按ctrl没有反应

五、事件流

事件流：事件在传递的过程中，会按照由子到父元素，或者由父到子元素的方向传递

冒泡：由子传父--当某个事件出发时，同样的事件回向父元素传递。

捕获：由父传子

阻止事件冒泡：e.stopPropagation();

兼容问题：e.cancelBubble=true;

兼容阻止事件冒泡的方法：e.stopPropagation?e.stopProragation:e.cancelBubble =true;.

六、阻止浏览器的默认行为

鼠标右键事件：oncontextmenu

阻止浏览器默认行为

e.preventDefault();

兼容性问题

1.e.preventDefault()？e.preventDefault()：e.returnVaule = false;

2.return false:(只能在浏览器阻止，不能在冒泡里使用)