JS阻止事件冒泡和事件默认行为

事件常见属性和方法

事件对象的常见属性	方法
e.target	返回触发 事件的对象 标准
e.srcElement	返回触发 事件的对象 非标准 IE 678使用
e.type	返回事件的类型比如 click mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 IE 678使用
e.returnvalue	该属性阻止默认事件(默认行为) 非标准IE 678使用比如不让链接跳转
e.preventDefault	该方法阻止默认事件(默认行为)标准比如不让链接跳转
e.stopPropagation	阻止冒泡 标准

[示例 1.]（返回触发事件对象）

// 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）

// 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁

var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {
    console.log(this);
    console.log(e.target);

    //e.currentTarget 跟this 非常相似的属性 但是IE 678不认识
    console.log(e.currentTarget); 
})

// 了解兼容性
// ul.onclick = function(e) {
//     e = e || window.event;
//     var target = e.target || e.srcElement;
//     console.log(target);

[示例 2.]（返回事件类型）

<div>123</div>
var dic = document.querySelector('div');
div.addEventListerence = function('click',fn);
div.addEventListerence = function('mouseover',fn);
div.addEventListerence = function('mouseout',fn);
function fn(e) {
    console.log(e.type);
}

[示例 3.]（阻止事件默认行为）

<div>123</div>
    <a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
     <input type="submit" value="提交" name="sub">
</form>
// 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
    e.preventDefault(); //  dom 标准写法
})

// 3. 传统的注册方式
a.onclick = function(e) {
    // 普通浏览器 e.preventDefault();  方法
    // e.preventDefault();
    // 低版本浏览器 ie678  returnValue  属性
    // e.returnValue;
    // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 
    // 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
    return false;
    alert(11);
}

阻止事件冒泡（面试问题⭐）

阻止事件冒泡的两种方式

事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到刭DOM最顶层节点。

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

阻止方式：

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

e.stopPropagation();

• 非标准写法: IE 678利用事件对象 cancelBubble属性

window.event.cancelBubble= true;  //非标准 cancel取消 bubble 泡泡

[示例 4.]（阻止事件冒泡）

// 常见事件对象的属性和方法
// 阻止冒泡  dom 推荐的标准 stopPropagation() 
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
    alert('son');
    e.stopPropagation(); 	// stop 停止  Propagation 传播
    e.cancelBubble = true; 	// 非标准 cancel 取消 bubble 泡泡
}, false);
// father 没有阻止事件冒泡 ，点击father还是会一级一级向上冒泡
var father = document.querySelector('.father');
father.addEventListener('click', function() {
    alert('father');
}, false);
document.addEventListener('click', function() {
    alert('document');
})

阻止事件冒泡兼容性解决方案【函数封装】

if(e.stopPropagation) {
	e.stopPropagation();
} else {
	window.event.cancelBubble = true;
}

事件委托（代理、委派）

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

事件委托原理

不用给每个子节点单独设置事件监听器, 而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

有如下案例： 给 ul 注册点击事件,然后利用事件对象的 target来找到当前点击的 li ,因为点击 li ,事件会冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。

事件委托作用

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

【加深理解】

生活中有如下场景
咱们班有100个学生,快递员有100个快递,如果个个的送花费时间较长。同时每个学生领取的时候,也需
要排队领取,也花费时间较长,何如?

解决方案: 快递员把100个快递,委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可。

优势: 快递员省事,委托给班主任就可以走了。同学们领取也方便,因为相信班主任

【事件冒泡案例】

事件冒泡本身的特性, 会带来的坏处,也会 带来的好处, 需要我们灵活掌握。程序中也有如此场景:

<ul>
    <li>我是1</li>
    <li>我是2</li>
    <li>我是3</li>
    <li>我是4</li>
    <li>我是5</li>
    <li>我是6</li>
</ul>

点击每个都会弹出对话框,以前需要给每个注册事件, 这是非常辛苦的, 而目访问DOM的次数越多,这就

会延长整个页面的交互就绪时间。

 // 利用事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('mousemove',function(e) {
    e.target.style.background = 'pink';
});
ul.addEventListener('mouseout',function(e) {
    e.target.style.background = '';
});

e.preventDefault 阻止鼠标事件

1.禁止鼠标右键菜单

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

// 阻止鼠标右键
document.addEventListener('contextmenu',function(e) {
    e.preventDefault();
})

2.禁止鼠标选中（selectstart 开始选中）

//阻止鼠标选中
document.addEventListener('selectstart',function(e) {
    e.preventDefault();
})