【JavaScript-13】阻止事件的默认行为+键盘表单事件

一、阻止默认行为

1.阻止事件冒泡

event.stopPropagation();

a标签不跳转：href=“javascript:;”

2.阻止默认行为

event.preventDefault();通常写在第一行

例子：

例1）如a标签不需要写onclick直接点击便可以跳转，此处写阻止默认行为，就是阻止a的点击行为

<script>
		var a = document.querySelector("a");
		a.onclick = function (e){
			e.preventDefault();
		}
	
</script>

例2）阻止默认行为，阻止右击页面自带的弹框

<script>
    //获取全屏的右击
	document.oncontextmenu = function (e){
			console.log("我是鼠标右击");
			e.preventDefault();
		}
</script>

二、键盘和表单事件

1.按键

回车键的获取e.keyCode = “13”;

<input class="inp" type="text">
<script>
	var inp = document.querySelector(".inp");
    //按键抬起
    inp.onkeyup = function (a){
        console.log("按键抬起的内容");
        //回车键盘的编码是13
        if(e.keyCode == "13"){
            alert("数据提交成功！");
        }
    }
    //按键按下的内容
    inp.onkeydown = function (){
        console.log("按键按下的内容");
    }
</script>

keypress 按键按下的时候触发，不能识别功能键，比如ctrl shift 左右按键

2.焦点的获得

注意：只有有输入的地方才会使用

<script>
	inp.onfocus = function (){
        console.log("我是获取焦点");
    }
    inp.onblur = function (){
        console.log("我是失去焦点");
    }
</script>

3.聚焦-输入-失去焦点

<script>
	var inp = document.querySelector(".inp");
    /聚焦-输入-失去焦点 内容发生改变
		inp.onchange = function (e){
			console.log("输入框发生改变触发",e);
		}

</script>