Javascript的事件注册与绑定

最新推荐文章于 2024-05-15 22:16:44 发布

csdn_wuhg

最新推荐文章于 2024-05-15 22:16:44 发布

阅读量351

点赞数

分类专栏： Javascript 文章标签： javascript javascript事件

本文链接：https://blog.csdn.net/qq_44127968/article/details/95791534

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

javascript的事件注册与绑定

一、javascript中的常用事件

事件类型	描述
onblur	元素失去焦点
onfocus	元素获得焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被持续按下
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onsubmit	提交按钮被点击

二、事件的注册与绑定

1.命名式绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

            //事件是为了触发函数的，所以这里定义了函数
            function onclickFn() {
                alert("单击事件执行啦！")
            }

            function ondblclickFn() {
                alert("双击事件执行啦！")
            }
    </script>
</head>
<body>
<!--定义两个button按钮，分别添加上单击事件和双击事件，并将事件指向指定的函数-->
<input type="button" onclick="onclickFn()" value="单击">
<input type="button" ondblclick="ondblclickFn()" value="双击">
</body>
</html>

2.匿名式绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
           // 这里需要先执行加载事件，否则无法获取下面的按键对象，因为html是由上向下执行的
         window.onload = function () {
             document.getElementById("onclick").onclick=function () {
                 alert("单击事件执行啦！");
             };


             document.getElementById("ondblclick").ondblclick=function () {
                 alert("双击事件执行啦！");
             }
         }
    </script>
</head>
<body>
<!--定义两个button按钮，然后给予ID属性 -->
<input type="button" id="onclick" value="单击">
<input type="button" id="ondblclick" value="双击">
</body>
</html>

csdn_wuhg

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript的事件注册与绑定

javascript的事件注册与绑定一、javascript中的常用事件事件类型描述onblur元素失去焦点onfocus元素获得焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onkeydown某个键盘的键被按下onkeypress某个键盘的键被持续按下onkey...
复制链接

扫一扫