JS DOM元素的获取及事件的绑定方式

最新推荐文章于 2024-04-11 23:56:42 发布

易安sparkle

最新推荐文章于 2024-04-11 23:56:42 发布

阅读量3.1k

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43675447/article/details/87900803

版权

js 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

一、dom元素的获取
在获取元素的时候得注意获取的元素是否初始化
CSS样式如下：

<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button id="btninfo">按钮1</button>
<button name="btn">button</button>
<button name="btn">注册</button>
<button name="btn">提交</button>

1.getElementsByClassName
例：var btn=document.getElementsByClassName("btn"); /*获取到了网页里面的按钮*/
说明：
（1）获取出来的对象是集合类型，也可以说是数组类型，即class可以绑定多个元素；
（2）获取出来是集合类型，就有长度属性 length（代表长度）；
（3）若需要获取的对象只有一个，则需在其之后加[0]；
（4）获取到单个元素之后操作元素：innerHTML，代表元素的html内容；
innerHTML使用方法：

btn[0].innerHTML = "按钮";
btn[1].innerHTML = "按钮";
for (var i = 0; i < btn.length; i++) {
    btn[i].innerHTML = "按钮";
}

2.getElementById
说明：获取是唯一元素
使用方法：

var btn = document.getElementById("btninfo");
btn.innerHTML = "注册";
console.log(btn);  //<button id="btninfo">注册</button>

3.getElementsByName
说明：通过元素的name名称获取
使用方法：

var btn = document.getElementsByName("btn");
console.log(btn);  //获取的是节点集合列表
console.log(btn[0]);  //<button name="btn">button</button>

4.getElementsByTagName
说明：元素的名称
使用方法：

var btn = document.getElementsByTagName("button");
console.log(btn[2]);  //<button id="btninfo">按钮3</button>

二、dom元素的事件
注：js里面的事件前面都带on
1.键盘事件
keydown(按下)、keyup(弹起)、keypress(按下弹起)
2.鼠标事件
mousedown(按下)、mouseup(抬起)、click(单击)、doubleclick(双击)、mouseenter(进入)、mouseleave(水平方向离开)、mouseout(垂直方向离开)、mouseover(悬停)、mousemove(移动)
3.窗口事件
load(加载，是自动执行的)、focus(获焦)、blur(失焦)
4.移动端事件（触屏事件）

三、元素的基本事件绑定
1.在元素的行内直接绑定事件
（1）方法的调用名称

<button onclick="alert(1);">按钮</button>  //alert为弹框

（2）js脚本
在元素内部on等等绑定，绑定完之后调用方法执行
绑定：<button onclick="btnData()">按钮</button>
方法执行：

function btnData() {
    alert("你点我！");
}

注：函数的加载
（1）函数的执行在页面加载之前，因此可以把< script>< /script>里的方法写在< body>< /body>之前（示例如下onload代码）；
（2）js里的window.onload事件（代码里写）就是body里的onload事件（元素标签里写），如下 window.onload事件：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        /* 窗口的加载完成事件*/
        window. function () {
            var btn=document.getElementById("btn");
            console.log(btn);
        }
    </script>
</head>
<body>
<button id="btn">按钮</button>
</body>

onload事件：

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function showData(){
            alert("窗口刷新了");
        }
    </script>
</head>
<body "showData()">
</body>

2.在脚本区域直接动态绑定事件
脚本写在元素之前得考虑获取的元素是否存在
方法：先获取对象元素，再给对象元素动态指定事件（对象.事件）
（1）id型（单个）
例：点击按钮
按钮：

<button id="btn">按钮</button>

动态绑定：

var btn = document.getElementById("btn");
btn.onclick = function () {
    alert("你好！");
};
btn.onmouseover = function () {
    alert("你悬停我");
}

注：当给一个对象绑定多个事件时，不能进行链式操作，即同一个对象连续“.”，需按照以上的写法进行操作
（2）集合型
例：点击按钮
按钮：

<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>

动态绑定（for循环）：

var btnclass = document.getElementsByClassName("btnclass");
for (var i = 0; i < btnclass.length; i++) {
    btnclass[i].onclick = function () {
        alert("你好");
    }
}

3.事件的监听
（1）添加监听事件
addEventListener(“click”,function(){ })：第一个参数指事件的类型，第二个参数指事件执行的回调函数
例：点击按钮
按钮：

<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>

添加事件的句柄（监听）：

var btnlist=document.getElementsByClassName("btnlist");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",function(){
        console.log("my");
    });
}

注：

事件前不加on；
里面的函数不加括号

（2）移除监听事件
removeEventListener():用于移除由addEventListener()方法添加的事件句柄
注：如果要移除事件句柄，addEventListener()的执行函数必须使用外部函数
若类似"btnlist[i].addEventListener(“click”,function(){console.log(“my”);});"，该事件是无法移除的；不进行事件的移除时，可以采用以上的回调函数

例：移除事件句柄

var btnlist=document.getElementsByClassName("btnlist");
for(var i=0;i<btnlist.length;i++)
{
    /*addEventListener()  简写方式   事件不带on*/
    btnlist[i].addEventListener("click",btnSave);
    function btnSave(){
        console.log("my");
        //移除事件的监听
        /*removeEventListener 在移除的时候 addEventListener 里面的内部函数得改成外部函数*/       
        this.removeEventListener("click",btnSave);   /*this 在事件的回调函数里面指代的是当前事件的执行对象*/
    }
}

说明：在以上代码中出现了一个this，我们先不使用这个this，使用i，看其输出结果

var btnlist=document.getElementsByClassName("btnlist");
for(var i=0;i<btnlist.length;i++){
    btnlist[i].addEventListener("click",function(){
        console.log(i);  //5
        console.log(this);  //<button class="btnlist">className</button>
    });
}

如上所示，i为5，那么这是为什么呢？
解释：事件在页面初始化的时候，已经绑好了，只差人为的触发，因此触发的时候事件已经全部绑好了，for循环已经执行完成，i已经达到最大值，而不是当前的i。
这样看来i值拿不到，可使用this进行替代；this在时间的回调函数里面，指代的是当前事件的执行对象，因此可避免使用其中的变量i

问题：如何拿到点击当前按钮所对应的索引值
解决方法见“JS 经典闭包面试题”里的事件闭包问题

易安sparkle

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS DOM元素的获取及事件的绑定方式

一、dom元素的获取在获取元素的时候得注意获取的元素是否初始化CSS样式如下：&lt;button class="btn"&gt;按钮1&lt;/button&gt;&lt;button class="btn"&gt;按钮2&lt;/button&gt;&lt;button id="btninfo"&gt;按钮1&lt;/button&gt;
复制链接

扫一扫