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

这篇具有很好参考价值的文章主要介绍了【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.焦点的获得

注意：只有有输入的地方才会使用文章来源地址https://www.toymoban.com/news/detail-488557.html

<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>