事件委托
事件冒泡本身的特征,会带来坏处,也会带来好处,需要我们灵活掌握.
事件委托
事件委托也称为事件代理,在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
