第七课 js事件

event事件对象

1、什么是event事件对象？

用来获取事件的详细信息：鼠标位置、键盘按键

——例子：获取鼠标位置：clientX

（1）首先对于点击事件，如果我们想要在页面打开后，在页面的任何一个地方点击都会弹出来一个框，那我们应该怎么做呢？

其实上面的event就是一个事件对象，它里面包含了事件的各种信息；其中clientX就是其中一个；

在火狐下事件处理函数则需要添加参数；

获取event对象(兼容性写法)：

——var oEvent=ev||event;

或||

这样的话那我们上面的鼠标点击显示位置事件就可以用这种方式来简化代码了:

事件流

（1）事件冒泡

取消冒泡：oEvent.cancelBubble=true

例子：仿select控件

DOM事件流

首先我们来看一下这个事件冒泡的问题：

这个事件冒泡的问题会在大部分的时候给我们带来很多问题，而不会有太大的用处，下面再来看一个例子（自定义的下拉列表）；

当我们用上面代码的时候点击按钮没有反应，这是为什么呢？我们现在来看一下再在上面加两个弹出框的代码：

当使用上述代码的时候我们发现当点击按钮的时候，下面的div会出现，且页面先弹出框”按钮被点击了“，接着会再弹出“页面被点击了”；而当我们点击页面的时候只弹出“页面被点击了”，说到这里我们就看到了事件冒泡的问题了；那么我们来分析一下接下来怎么处理：

现在我们就要用到这个取消冒泡的属性了，即cancelBubble；

鼠标事件

1、鼠标位置

可视区位置：clientX、clientY（鼠标的坐标）

这里我们注意，现在我们只知道它是鼠标的坐标，但是我们不知道它是鼠标的什么坐标，现在我们来看一个实例：

——例子：跟随鼠标的Div

（1）onmousemove 事件会在鼠标指针移动时发生。

注释：每当用户把鼠标移动一个像素，就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件.

这里又出现了其他的问题，代码如下所示；

当我们给body加一个高度之后我们就会发现这个div跟鼠标脱离了，那这是为什么呢，接下来我们来看一下问题出现在哪里？
实际上这个clientX说的是可视区坐标，那什么是可视区呢？什么又是可视区坐标呢？

image.png

这里又出现了一个滚动距离（滚动条）：scrollTop属性；

-消除滚动条的影响

-滚动条的意义——可视区与页面顶部的距离

注意：小小的经验：主要你用到了clientX，你就一定要加scrollLeft；只要用到了clientY，你就一定要加scrollTop。

键盘事件

onclick=onmousedown+onmouseup；（鼠标点击）

onpress=onkeydown+onkeyup；（键盘按下）

keyCode（键码）

获取用户按下键盘的哪个按键

——例子：键盘控制Div移动

其他属性

点击回车提交留言
ctrlKey、shiftKey、altKey

默认行为

1. 什么是事件的默认行为（默认事件）

（1）浏览器不需要我们去编写，浏览器自身就已经具备的功能；（点击右键弹出页面菜单）

（2）如何阻止默认行为

2. 上下文菜单：oncontextmenu（右键菜单）
　　　点击右键就会弹出a，且会出现右键菜单；

事件处理函数中返回false，可以阻止默认行为。阻止右键菜单，点击无法弹出。

再来看一下一个阻止表单提交的实例：

无论怎么点击提交按钮都无法提交网址。这样就可以进行表单校验了。

文本框内禁止输入内容实例（阻止onkeydown）

自定义右键菜单实例

    
    
    
    



    
登陆
    
回到首页
    
注销
    
加入VIP

只能输入数字的输入框实例：onkeydown、onkeyup
keyCode=8是退格键

事件绑定的另外一种方式

addEventListener

先来看一个片段：

html代码

追梦子

用on的代码

 1 window.onload = function(){
 2     var box = document.getElementById("box");
 3     box.onclick = function(){
 4         console.log("我是box1");
 5     }
 6     box.onclick = function(){
 7         box.style.fontSize = "18px";
 8         console.log("我是box2");
 9     }
10 }
　　　　　运行结果：“我是box2”

第二个onclick把第一个onclick给覆盖了，虽然大部分情况我们用on就可以完成我们想要的结果，但是有时我们又需要执行多个相同的事件，很明显如果用on完成不了我们想要的，addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件。

用addEventListener的代码

1 window.onload = function(){
2     var box = document.getElementById("box");
3     box.addEventListener("click",function(){
4         console.log("我是box1");
5     })
6     box.addEventListener("click",function(){
7         console.log("我是box2");
8     })
9 }
　　　　运行结果：我是box1
　　　　　　　　　我是box2