Event对象常见的方法和属性

1.event.preventDefault()

如果调用这个方法，默认事件行为将不再触发

什么是默认事件呢？例如表单一点击提交按钮（submit）刷新页面、a标签默认页面跳转或是描点定位等。

使用场景一：使用a标签仅仅是相当做一个普通的按扭，点击实现一个功能，不想页面跳转，也不想描点定位。

• 方法一：

<a href="javascript:;">链接</a>

• 方法二：使用JS方法来阻止，给其click事件绑定方法，当我们点击a标签的时候，先触发click事件，其次才会执行自己的默认行为

<a id="test" href="http://www.google.com">链接</a>
<script>
    test.onclick=function(e){
        e=e||window.event;
        return false;
    }
</script>

• 方法三

<a id="test" href="http://www.google.com">链接</a>
<script>
    test.onclick=function(e){
        e=e||window.event;
        e.preventDefault();
    }
</script>

** 使用场景二：** 输入框最多只能输入6个字符，如何实现？

<input type="text" id='tempInp'>
<script>
    tempInp.onkeydown = function(ev) {
        ev = ev || window.event;
        let val = this.value.trim() //trim去除字符串首位空格（不兼容）
        // this.value=this.value.replace(/^ +| +$/g,'') 兼容写法
        let len = val.length
        if (len >= 6) {
            this.value = val.substr(0, 6);
            //阻止默认行为去除特殊按键（DELETE\BACK-SPACE\方向键...）
            let code = ev.which || ev.keyCode;
            if (!/^(46|8|37|38|39|40)$/.test(code)) {
                ev.preventDefault()
            }
        }
    }
</script>

2.event.stopPropagation() & event.stopImmediatePropagation()

event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行

// 在事件冒泡demo代码的基础上修改一下
child1.addEventListener('click',function fn1(e){
    console.log('儿子');
    e.stopPropagation()
},false)

stopImmediatePropagation 既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其它监听器被触发。而 stopPropagation 只能实现前者的效果。

<button id="btn">点我试试</button>
<script>
const btn = document.querySelector('#btn');
btn.addEventListener('click', event => {
  console.log('btn click 1');
  event.stopImmediatePropagation();
});
btn.addEventListener('click', event => {
  console.log('btn click 2');
});
document.body.addEventListener('click', () => {
  console.log('body click');
});
</script>

根据打印出来的结果，我们发现使用 stopImmediatePropagation后，点击按钮时，不仅body绑定事件不会触发，与此同时按钮的另一个点击事件也不触发。

---

event.target指向引起触发事件的元素，

而event.currentTarget则是事件绑定的元素

e.target 指向触发事件监听的对象「事件的真正发出者」

e.currentTarget 指向添加监听事件的对象「监听事件者」

---