JavaScript笔记(17)

事件委托

事件冒泡本身的特征,会带来坏处,也会带来好处,需要我们灵活掌握.

事件委托

事件委托也称为事件代理,在jQuery里面被称为事件委派

事件委托的原理

不是给每个子节点单独设置事件监听器,而是将事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点 (一定要记住!)

事件委托的作用

我们只操作了一次DOM,提高了程序的性能

那我们可以这么做,给ul加上点击事件:

但是我们可以看到点击li的时候也会弹出警示框,这是为什么呢?

JS中当触发某些具有冒泡性质的事件时，首先在触发元素寻找是否有相应的注册事件，如果没有再继续向上级父元素寻找是否有相应的注册事件作出响应，这就是事件冒泡。

也就是说,由于是冒泡阶段,所以是按照 li->ul->body->html->document的顺序查找的,由于在li中没有找到触发事件,就向上一级(ul)寻找触发事件,ul设置了触发事件,所以会弹出警示框,但由于点击的是li,e.target是li,所以li的背景会变成粉红色.

常用的鼠标事件

1.禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单.比如取消显示框选文本后点击右键的复制

这样就不能右键复制了,但是还是可以control+c复制,那现在我们再学习一个阻止鼠标选中的方法:

2.禁止鼠标选中 (selectstart)

鼠标事件对象

event对象代表事件的状态,跟事件相关的一系列信息的集合.现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent

clientX / clientY

我们获取一下在可视区中的点击坐标:(如果页面滚动也不会影响)

但是如果整个页面有有滚动条,我们想要获取点击的位置距离最顶端的坐标呢?我们需要用到 pageX和pageY

实际开发中page用的比较多,重点记page这个

案例: 跟随鼠标移动的天使

我自己做出来啦,看看代码:

这个效果在购物平台很常见,比如放大商品细节时的黄色框框

如果想要居中那就x-盒子宽度的一半,y减去盒子高度的一半

常用的键盘事件

• keyup和keydown是不区分大小写的,keypress区分大小写
• 如果同时写了onkeydown和press,会先执行onkeydown再执行press,因为press多了一层判断

案例时间到: 我们做个京东的案例,就算用户点击了页面中的其他地方,只要按下's'键,光标就能回到搜索框:

贴一下我一开始的做法:

但是出现了问题:当我按下s时,s也被输进去了,这不是我们要的效果

这是因为我们一直按着(即使时间很短),所以s也会被输进去,所以我们换个思路,将keydown换成keyup,那么就可以成功实现了:

案例:模拟京东快递查询

我们在输入单号的时候上面会出现一个大的框框,里面的数字字号更加大些,先自己试着做做

千万要注意用的是keyup而不是keydown,因为我们按下键盘时,就已经触发事件,但是文字还没有输入文本框内.

DOM部分到这里就结束啦!接下来学习BOM