JSP事件——键盘、鼠标、表单-Toy模板网

这篇具有很好参考价值的文章主要介绍了JSP事件——键盘、鼠标、表单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作，是用户与浏览器交互最为常见的方式。

1.键盘

1、onclick

onclick是最常见的鼠标事件，由用户使用鼠标左键点击后触发相应的函数方法。

document.body.onclick = function(){ //点击body元素，触发点击事件
	console.log('点击事件触发')
}

document 指的是当前网页 (文档)对象，function 是定义函数的关键字,console.log() 输出文本内的东西

2、ondblclick

ondbclick是一个鼠标的双击事件，和onclick唯一的不同点就是onclick只需要点击一下就会触发相关函数，而ondbclikc需要点击两下才会触发。

document.body.ondbclikc = function(){ //双击body元素，触发点击事件
	console.log('双击事件触发')
}

3、onmousedown和onmouseup

该事件和onclick类似，鼠标点击后且鼠标为弹起时就执行。onmouseup，顾名思义，就是鼠标点击后松开时执行对应的函数

document.body.onmousedown = function(){ //点击body元素，触发事件，nomouseup使用方法一致
	console.log('点击事件触发')
}

4、onmouseenter，onmouseleave，onmousemove
onmouseenter为鼠标进入节点时触发，onmouseleave为鼠标离开该节点触发

onmousemove为鼠标移入节点是触发的事件，该事件和onmouseenter的区别是：onmouseenter在鼠标移入后只会触发一次事件，而该事件则会因为鼠标在该节点内移动而触发多次

document.body.onmouseenter = function(){ //点击body元素，触发事件，nomouseleave使用方法一致
	console.log('点击事件触发')
}

5、onmouseout和onmouseover

onmouseout和onmouseleave相似，都是鼠标移入元素后再移出时触发，onmouseover和onmouseenter相似，鼠标移入时触发。
【onmouseout和onmouseover以及onmouseenter和onmouseleave】区别在于：
在父元素内部离开一个子元素时，onmouseleave事件不会触发，而onmouseout事件会触发。onmouseenter事件只触发一次，而只要鼠标在节点内部移动，onmouseover事件会在子节点上触发多次

document.body.onmouseout = function(){ //onmouseover同样的写法
      console.log('鼠标离开触发') 
    }

6.onwheel

鼠标滚轮使用时触发

<div style="width: 30px;height: 1130px;background-color: black;"></div>
 <script>document.body.onmousewheel = function(){
      console.log('使用鼠标滚轮后触发')
    }
</script>

7、oncontextmenu

鼠标右键点击触发事件，当返回值为false时，鼠标右键菜单会被关闭

document.oncontextmenu = function(){ //鼠标右键触发机制，返回false时页面中不能使用鼠标右键菜单
        console.log('使用了鼠标右键菜单');
        return false
      }

2.键盘事件

键盘事件由用户敲击键盘触发，主要有**keydown、keypress、keyup**三个事件

keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件.
该事件处理函数返回 false 时，会取消默认的动作.
keyup：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。
keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作.

3.表单

表单事件中使用了添加事件监听的方法【addEventListener(‘eventName’,callback)】这个方法是JS标准添加事件方法，该方法需要传入两个参数，第一个是事件名字符串（不加on），第二个是对应的回调函数，前面的鼠标事件中用的onclick等方法都可以使用该方法代替，只需要把前面的on去掉，直接使用后面的事件名。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<body>
 <button id="test">按钮</button>
  <script>var elem = document.getElementById('test');
    elem.addEventListener('click', function (e) { 
      console.log('点击事件执行'); 
    });
  </script>
</body>
</html>

1、input 事件

input事件当< input>、< select>、< textarea>的值发生变化时触发。对于复选框（< input type=checkbox>）
或单选框（< input type=radio>），用户改变选项时，也会触发这个事件。另外，对于打开contenteditable
属性的元素，只要值发生变化，也会触发input事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>input事件</title>
</head>
<body>
  <input id="test" type="text" value="请输入" />
  <script>var elem = document.getElementById('test');
    elem.addEventListener('input', function (e) { 
      console.log('输入框有变动就触发input事件'); 
    });
  </script>
</body>
</html>

3、change 事件

change事件当< input>、< select>、< textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面input事件必然伴随change事件。具体来说，
分成以下几种情况：
激活单选框（radio）或复选框（checkbox）时触发。
用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
当文本框或< textarea>元素的值发生改变，并且丧失焦点时触发。
4、invalid 事件

用户提交表单时，如果表单元素的值不满足校验条件，就会触发invalid事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<body>
  <form>
    <input type="text" required oninvalid="alert('输入不能为空')" />
/*当可提交的 <input> 元素无效时，会发生 oninvalid 事件。required 属性指定输入字段必须在提交表单之前填写*/
    <button type="submit">提交</button>
  </form>
</body>
</html>

5、reset 事件，submit 事件

这两个事件发生在表单对象< form>上，而不是发生在表单的成员上。
reset事件当表单重置（所有表单成员变回默认值）时触发。
submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是< form>元素，
而不是< button>元素，
因为提交的是表单，而不是按钮。文章来源地址https://www.toymoban.com/news/detail-483663.html

到了这里，关于JSP事件——键盘、鼠标、表单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！