JavaScript DOM文档事件

最新推荐文章于 2023-06-28 14:36:05 发布

Ran959

最新推荐文章于 2023-06-28 14:36:05 发布

阅读量351

点赞数 4

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_67588007/article/details/126770246

版权

一、事件

什么是事件？

可以触发浏览器的行为 js和html之间交互的触发点。

二、事件的分类

js的事件大致分为四类：

窗口事件
表单事件
键盘事件
鼠标事件

1.窗口事件

当对窗体进行操作时，比如窗体的打开、关闭、激活、停用等，这些动作都属于窗体事件

1.1.onblur 失去焦点事件

//当窗口失去焦点时（鼠标光标不在这个窗口）
     window.onblur=function (){
         console.log('窗口失去了焦点！');
     }

1.2.onfocus获得焦点事件

//当窗口获得焦点时
     window.onfocus=function () {
         console.log('窗口获得了焦点！');
   / }

1.3.onload 窗口加载完成后事件

//当窗口加载完成后（打开窗口后）
     window.onload=function () {
         console.log('窗口加载完成！');
     }

1.4.onresize 窗口大小改变事件

//当窗口大小改变时
     window.onresize=function () {
         console.log('窗口大小改变了！');
     }

1.5.onbeforeunload 窗口刷新事件

//窗口刷新或关闭时
    window.onbeforeunload = function() {
            console.log("窗口刷新了！")
        }

1.6.onscroll窗口滚动事件

//当窗口滚动时
    window.onscroll = function() {
            console.log("滚动");
        }

2.表单事件

1.1、onsubmit（绑定提交事件）

<body>
	<div id="test" style="background-color: pink; width: 200px; height: 200px;">
	</div>
	<br><hr><br>
	<form action="http://www.baidu.com">
		<input type="text">
		<input type="submit">
	</form>


<script>
		window.onload = function(){	
		
			var oForm = document.getElementsByTagName("form")[0];
			var aInput = document.getElementsByTagName("input")[0];

		// 绑定提交事件
			oForm.onsubmit = function(){
				console.log("submit");
				// 每次提交都会刷新页面，所以 return False 使其提交失败
				// 但提交事件依然发生（为了方便观察才这么做）
				return false;	// 可以注释观察效果
			}
			
		}
	</script>
</body>

1.2 onchange（文本框内容改变时事件）

<input type="text" id="myText" value="这是默认值" required />

<script>
let myText = document.getElementById("myText");
 //文本框内容改变时
     myText.onchange=function (){
        console.log('文本框内容改变了！');
     }
</script>

1.3 oninput（文本框内容修改时事件）

  //文本框内容修改时
     myText.oninput=function (){
         console.log(myText.value);
         console.log('文本框内容修改了！');
     }

1.4 onselect（文本框内容被选中事件）

//当文本框内容被选中时
     userCode.onselect = function(){
         console.log("文本框已被选中");
     }

1.5 onfocus（文本框获得焦点事件）

//文本框获得焦点时改变背景色
     myText.onfocus=function (){
         myText.style.backgroundColor="red";
     }

1.6 oninvalid（获取表单未能提交事件）

<form action="#" method="get" id="myForm">
    <label>账号：</label> <input type="text" id="userCode" value="这是默认值" required /> <br/><br/>
    <label>密码：</label> <input type="password" id="userPwd"/> <br/><br/>
    <input type="submit"/>
    <input type="reset" />
</form>

<scirpt>
// 获取表单 未能提交时
     let userCode = document.getElementById("userCode");
      userCode.oninvalid = function () {
         console.log("请您完成表单的内容!");
      }
</scirpt>

3.键盘事件

1.1onkeydown键盘按下事件

/* onkeydown键盘按下事件 */
       window.onkeydown = function (event) {
           /!* 解决兼容问题 *!/
           event = event || window.event;
           console.log("键盘按下了" + event.keyCode);
           if (event.keyCode == 13) {
               console.log('按下了回车');
           }
       }

1.2onkeyup当松开按键时触发

 /* onkeyup当松开按键时 触发 */
     window.onkeyup = function (event) {
         event = event || window.event;
         console.log("键盘按下了" + event.keyCode);
         if (event.keyCode == 13) {
             console.log('按下了回车');
         }
     }

1.3onkeypress键盘按下并松开时

/* onkeypress键盘按下并松开时*/
     window.onkeypress = function (event) {
         event = event || window.event;
        console.log("键盘按下了" + event.keyCode);
         if (event.keyCode == 13) {
              console.log('按下了回车');
         }
    }

2.键盘移动代码块

<style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .divStyle {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    
<div id="box" class="divStyle">

</div>

var box = document.getElementById("box");
    document.onkeydown = function (event) {
        event  = event ||window.event;
        switch (event.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - 10+'px';
                break;
            case 39:
                box.style.left = box.offsetLeft + 10+'px';
                break;
            case 38:
                box.style.top = box.offsetTop - 10+'px';
                break;
            case 40:
                box.style.top = box.offsetTop + 10+'px';
                break;
        }
    }

4.鼠标事件

1.1 onclick鼠标单击事件

	 window.onclick = function () {
         console.log("鼠标单击事件");
     }

1.2 ondblclick鼠标双击事件

       window.ondblclick = function () {
         console.log("鼠标双击事件");
     }

1.3 onmousedown当鼠标按钮按下运行时事件

  window.onmousedown = function () {
         console.log("当鼠标按钮按下运行时");
     }

1.4 onmouseup当鼠标按钮运行时事件

  window.onmouseup = function () {
        console.log("当鼠标按钮运行时");
     }

1.5 onmouseover当鼠标按钮运行时事件

/* onmouseover 当鼠标移入时  不能阻止冒泡  */
    function divMouseover() {
        console.log("当鼠标进入了当前的DIV");
    }

1.6 onmouseout当鼠标移出时不能阻止冒泡

/* onmouseout : 当鼠标移出时  不能阻止冒泡*/
    function divMouseout() {
        console.log("当鼠标移出了当前的DIV");
    }

2.测试html代码

<div onmouseover="divMouseover()"
     onmouseout="divMouseout()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseover="divMouseover()"
         onmouseout="divMouseout()"
         style="width: 100px;height: 100px;background: pink">
        
        
<div id="box" style="overflow: scroll;width: 200px;height: 200px;">
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

js：

/* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
/* onmouseleave ： 可以阻止事件冒泡 */
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
 /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }

Ran959

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM文档事件

可以触发浏览器的行为 js和html之间交互的触发点。1.6 onmouseout当鼠标移出时不能阻止冒泡。1.3 onmousedown当鼠标按钮按下运行时事件。1.5 onmouseover当鼠标按钮运行时事件。1.4 onmouseup当鼠标按钮运行时事件。1.2 ondblclick鼠标双击事件。1.1 onclick鼠标单击事件。等，这些动作都属于窗体事件。
复制链接

扫一扫