事件的监听

Posted 2022-04-13 a199706

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件的监听相关的知识，希望对你有一定的参考价值。

<style>
    #d1width: 200px;height: 200px;background: red;
    #d2width: 200px;height: 200px;background: yellow;display: none;
    
    </style>
<script type="text/javascript">
    //绑定html元素方式
    function test1()
        alert("这是绑定html元素的方式");
    
    //绑定dom的方式
    function test2()
        alert("这是绑定dom的方式");
    
    //添加一个页面加载完成执行
    window.onload=function()
        //获取按钮来执行test2函数
        var button=document.getElementById("test2");
        //给按钮添加监听
        button.onclick=test2;
    
    
    /*更换*/
    
    function over()
        //获取id为d2的元素
        var d2=document.getElementById("d2");
        //设置d2的元素显示
        d2.style.display="block";
    
    function out()
        //获取id为d2的元素
        var d2=document.getElementById("d2");
        //设置d2的元素显示
        d2.style.display="none";
    
    </script>
    
</head>

<body>
<a href="https://www.baidu.com/" >点击我</a>
<input type="button" value="测试1" id="mytest1"  onClick="test1()">
<button type="button" id="test2"><b>测试2</b></button>


<div id="d1" onMouseOver="over()" onMouseOut="out()"></div>
<div id="d2"></div>
</body>

技术图片

这是最普通的一个点击出现下拉滑块。

其中比较常用的事件是

常见的事件类型：

onclick	单击鼠标左键触发
ondblclick	双击鼠标左键触发
onmousedown	单击任意一个鼠标按键时触发
onmouseout	鼠标指针移出一个元素边界时触发
onmousemove	鼠标在某个元素上移动时持续触发
onmouseup	松开鼠标任意一个按键时触发
onmouseover	鼠标指针移到一个元素上时触发

常用的键盘事件：

onkeydown	按下键盘上某个按键时触发，一直按会持续触发
onkeyup	释放某个按键时触发
onkeypress	按下某个按键并产生字符时触发，忽略shift等功能键

HTML事件：

onload	页面完全加载后在window对象上触发 window.onload=function（）页面加载完成的常用语句
onunload	页面完全卸载后再window对象上触发
onselect	选择了文本框的一个或多个字符时触发
onchange	文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发
onsubmit	单击“提交”按钮时在表单form上触发
onfocus	任何元素或窗口获得焦点时触发当鼠标移入表单
onblur	任何元素或窗口失去焦点时触发当鼠标移出表单

以上是关于事件的监听的主要内容，如果未能解决你的问题，请参考以下文章

JavaFX实战：几种事件监听实现，键盘按键事件监听，鼠标滚轮事件监听，鼠标按键事件监听，鼠标移动事件监听

Spring事件监听机制

Android 键盘事件触发以及监听

vue 监听函数发生事件