Web APIs---7. 事件高级(3)

标签：鼠标移动   web   bubble   写法   src   选中   需要   sel   lse   

5 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。事件冒泡本身的特性会带来坏处也会带来好处。

阻止事件冒泡

• 标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation()

• 非标准写法：IE6-8利用事件对象cancleBubble属性

e.cancelBubble = true;

• 兼容性写法

//3. 兼容性方案
if (e && e.stopPropagation) {
    e.stopPropagation();
} else {
    window.event.cancelBubble = true;
}

• 举例：

    

        
son盒子
    
    

6 事件委托（代理、委派）

事件冒泡本身的特性会带来坏处也会带来好处，需要灵活掌握。生活中有如下场景：

• 生活中
  

• 程序中
  

事件委托

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

事件委托的原理

不是每个子节点都单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件就会冒泡到ul上，ul有注册事件就会触发事件监听器

事件委托的作用

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

• 举例：

    

知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
        
知否知否，点我应有弹框在手！
    

7 常用的鼠标事件

7.1 常用的鼠标事件

禁止鼠标右键菜单contextmenu

事件contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e){
    e.preventDefault();
})

• 举例：

    我是一段不愿意分享的文字
    

禁止鼠标选中(selectstart 开始选中)

document.addEventListener('selectstart', function(e){
    e.preventDefault();
})

• 举例

    我是一段不愿意分享的文字
    

7.2 鼠标事件对象

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

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

• 鼠标不断移动，使用鼠标移动事件：mousemove
• 在页面中移动，给document注册事件
• 图片要移动距离，而且不占位置，我们使用绝对定位即可
• 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left就可以移动图片

Web APIs---7. 事件高级(3)

标签：鼠标移动   web   bubble   写法   src   选中   需要   sel   lse   

原文地址：https://www.cnblogs.com/deer-cen/p/12241150.html