JavaScript事件行为

js默认行为阻止

一.哪些默认行为要做阻止

1.a标签链接跳转

什么是默认行为？一个最简单的例子，我有一个a标签

<a href="https://www.baidu.com/" target="_blank">百度</a>

点击百度两个字就会打开百度页面，点击后链接地址跳转就是a标签的默认行为。

---

a在点击会触发click事件，我们只要在回调中加入事件阻止方法就可以阻止跳转发生：

<a href="https://www.baidu.com/" target="_blank" id="skip">百度</a>

var skip=document.getElementById("skip");skip.onclick=function(event){ event.preventDefault();};

再次点击百度，还会停留在当前页面，当然除了调用事件对象的阻止方法还可以用下面的处理：

skip.onclick=function(event){ return false;}

---

事件对象

事件对象常见属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 -------标准
e.srcElement	返回触发事件的对象----非标准ie6-8使用
e.type	返回事件的类型 比如click mouseover 不要on
e.cancelBubble	该属性阻止冒泡 ------非标准 ie6-8 使用
e.oreventDefault()	该方法阻止默认事件 （默认行为）标准 比如不让链接跳转
e.returnValue	该属性 阻止默认事件（默认行为）非标准ie6-8使用 比如不让链接跳转
e.stopPropagation()	阻止冒泡 标准

var div = doucument.querySelector("div");
div.addEventListener('click',fn);
function fn (){
console.log(e.type);
}
//阻止默认行为（事件）让链接不跳转 让提交按钮不提交
var  a = document.querySelector('a')
a.addEventListener('click',function(e){
e.preventDefault();
})
//3. 传统的注册方式i、
a.onclick = function (){
//普通浏览器 e.preventDefault();
e.preventDefault();
//低版本浏览器ie678 returnValue 属性
e.returnValue ;
//
return false;//使用方法 return 后面的代码不执行了
alert(11) 空 

}

如何阻止冒泡

阻止事件冒泡的两种方式

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

事件冒泡本身有的特性：会带来的坏处，也会带俩好处，需要我们灵活掌握

阻止事件冒泡

标准写法：利用事件对象里面的stopPropagation()方法 stop停止 propagation传播

e.cancelBubble = true ; 非标准写法

阻止事件冒泡的兼容性解决方案

if（ e && e.stopPropation）{
e.stopPropation();
}else{
window.event.cancelBubble = true;
}

事件委托（代理、委派）

事件冒泡委托 委派

<ul>
  <li>知否知否</li>
  <li>知否知否</li>
  <li>知否知否</li>
  <li>知否知否</li>
  <li>知否知否</li>
</ul>

事件委托的原理

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

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

事件委托的作用

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

  //事件委托的核心原理 ：给父节点添加事件监听器
      var ul = document.querySelector("ul");
      ul.addEventListener("click", function () {
        alert("你猜对了");
      });
// e.target.style.backgroundColor = "pink";