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 指向添加监听事件的对象「监听事件者」