JavaScript中DOM元素的事件

最新推荐文章于 2024-06-08 16:17:53 发布

木易一

最新推荐文章于 2024-06-08 16:17:53 发布

阅读量345

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43684713/article/details/86774915

版权

JavaScript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

事件，是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互。事件触发和函数一起使用，当触发事件的时候，调用相应的代码去处理接下来的事情，

例如，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出反应，返回给用户一个结果。

javascript里面的事件分为键盘事件，鼠标事件，窗口事件，移动端的事件（触屏）等。

主要事件

事件	描述
onload 和 onunload	用户进入或离开页面
onmouseover 和 onmouseout	用户的鼠标移至 HTML 元素上方或移出元素
onmousedown, onmouseup ，onclick	点击鼠标按钮，释放鼠标按钮，完成鼠标点击
onkeydown、onkeyup、onkeypress	按下一个键，松开一个键，按下再松开一个键
onfocus,onblur	光标聚焦,光标离开
oncontextmenu	单击鼠标右键
onchange	文本框内容改变
onselect	文本框内容选中
oncopy,oncut,onpaste	用户拷贝元素内容,用户剪切元素内容,用户粘贴元素内容
onsubmit	表单提交
onabort,oncanplay,onerror,onended	视频/音频终止加载，可以开始播放视频/音频，视频/音频数据加载错误，视频/音频播放结束

绑定事件的方式

1.在元素的行内直接绑定事件

直接在HTML中添加事件，如：

2.在js脚本区域动态绑定事件

需要考虑脚本的加载完成时获取的元素是否存在。

第一种写法，脚本写在<body>里，如下：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="windowsread()">//windowsread()函数预加载
<button id="btn">按钮</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<script>
    function windowsread() {
        var btn = document.getElementById("btn");
        btn.onclick=function(){
            alert("hello")
        }
    }
    var btnclass=document.getElementsByClassName("btnclass");
    for(var i=0;i<btnclass.length;i++){
        btnclass[i].onclick=function(){
            alert("Hello World");
        }
    }
</script>
</body>
</html>

第二中写法，脚本写在<head>里，需要写窗口加载事件（指事件会在页面加载完成后触发。）。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        // window.onload窗口加载事件
        window.onload=function(){
            var btn = document.getElementById("btn");
            btn.onclick=function(){
                alert("hello")
            };
            var btnclass=document.getElementsByClassName("btnclass");
            for(var i=0;i<btnclass.length;i++){
                btnclass[i].onclick=function(){
                    alert("Hello World");
                }
            }
        }
    </script>
</head>
<body>
<button id="btn">按钮</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
</body>
</html>

3.事件的监听（事件的委托）

使用addEventListener()方法，给指定元素添加事件句柄。

注意：addEventListener()方法添加事件时事件不带on

语法：element.addEventListener(event, function, useCapture)

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function (){
            //获取class名称的元素
            var btnlist=document.getElementsByClassName("btnlist");
            for(var i=0;i<btnlist.length;i++)
            {
                btnlist[i].addEventListener("click",function(){
                    alert("hello")
                });
            }
        }
    </script>
</head>
<body>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
</body>
</html>

移除事件的监听

使用removeEventListener()方法移除由addEventListener()方法添加的事件句柄。

removeEventListener 在移除的时候 addEventListener 里面的内部函数必须改成外部函数。

eg：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function (){
            //获取class名称的元素
            var btnlist=document.getElementsByClassName("btnlist");
            for(var i=0;i<btnlist.length;i++)
            {
                btnlist[i].addEventListener("click",showSave);
            }
            function showSave(){
                console.log("hello");
                this.removeEventListener("click",showSave)//this 在事件的回调函数里面指代的是当前事件的执行对象
            }
        }
    </script>
</head>
<body>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
<button class="btnlist">className</button>
</body>
</html>

木易一

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中DOM元素的事件

事件，是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互。事件触发和函数一起使用，当触发事件的时候，调用相应的代码去处理接下来的事情，例如，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出反应，返回给用户一个结果。javascript里面的事件分为键盘事件，鼠标事件，窗口事件，移动端的事件（触屏...
复制链接

扫一扫