sdc-main-oc 添加点击事件_事件详解C - 键盘事件及事件流

键盘事件

格式：document.键盘事件

1.onkeypress; 按下字符键触发

2.onkeydown; 按下任意键触发

先来看onkeypress和onkeydown：

运行结果如下：

altKey、ctrlKey、shiftKey; 也是键盘事件的属性

//返回布尔值true或者false来判断是否按了某一个键

来看一下使用方法：

运行结果如下：

evt.keyCode; 判断是否按了某个键

运行结果如下：

事件流

事件流描述的是页面接收事件的顺序

事件流的的三个阶段︰捕获，目标，冒泡

阻止冒泡

事件委托机制∶利用事件冒泡的原理，把本应添加给某元素上的事件委托给他的父级(外层)

举个小例子：

运行结果如下：

点击红色区域只显示outer；但是点击蓝色区域会显示inner和outer，inner先输出。

此时，点击蓝色区域相当于先点蓝色再点红色

下面红色区域也会输出，就是因为有冒泡情况的出现

冒泡：最特定的目标，到最不特定的目标的过程

那我们该如何阻止冒泡显示呢？

这里需要先定义evt，然后使用下面两种方式：

evt.cancelBubble = true; //适合于所有高低版本的浏览器

evt.stopPropagation(); //适用于新版的浏览器

我们还是拿上面的例子来看一下：

只需要在上面的例子上加上这几句代码

运行结果如下：

即可成功取消冒泡操作，点击蓝色只会出现inner

事件委托机制

上面我们提到事件委托就是利用事件冒泡的原理，把本应该添加给某元素上的事件委托给它的外层父级

为什么会有事件委托机制呢？

因为在我们的实际操作的过程当中，我们有显示某些数据的一个列表，我们在进行页面布局的时候，默认的显示5条数据，这5条数据假设我们都需要添加一个单击事件，当我们点击加载更多，或者有其他操作、需要更多数据的时候，后面的这个数据它就不具备单击事件

这时候不是我们所希望看到的，就需要用到事件委托了，即使是后添加到页面当中的数据，也能具备相应的事件处理函数

我们还是通过具体的代码来看一下：

运行结果如下：

当我们点击前5个的时候，都没有问题可以正常显示

但是当我们点击后面在js中创建的5个时，不会显示任何效果

我们来利用事件委托来拯救一下这个问题：

这里我们要把本来添加到li上的事件添加到ul上，下标写在获取时，方便书写

运行结果如下：

无论点击之前的5个还是新建的5个，包括空白区域

只要点击ul中的东西就会返回aa

显然这也不是我们需要的效果

这里将获取节点nodeName时，改为大写，是因为

当你输出nodeName时你会发现全是大写的

nodeName代表指定的节点名称

现在的运行效果如下：

分别点击就会显示正确的对应数值

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web