dom元素事件的理解和应用

dom 是一组用来描述脚本和结构之间如何交互的web标准；它是中立于平台和语言的接口。
html dom定义了所有html元素的对象和属性，以及访问它们的方法。

document对象指的是所有的html对象

1.dom元素的获取

getElementsByClassName 获取的是集合类型，可以借助数组类型来理解 （是用的比较多的类型）
getElementById 获取的是唯一元素，可以借助id 特性来理解（适合单一元素类型的获取）
getElementsByName 获取的是集合类型，可以借助数组和name来理解
getElementsByTagName 获取集合类型借助标签类型来理解
document.body.getElementsByTagName（作为了解）
js里面不能进行隐式迭代（不能操作一堆）所以进行dom元素的获取时，一般先进性遍历！！！

代码分别如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom操作</title>
</head>
<body>
    <button class="test">12345</button>
    <button class="test">99999</button>
    <button id="test">id</button>
    <button name="test">icy</button>
    <button name="test">fev</button>
    <script>
        var text=document.getElementsByClassName('test');//1
        var text_id=document.getElementById('test');//2
        var text_name=document.getElementsByName('test');//3
        var text_tagname=document.getElementsByTagName('button');//4
        var btn=document.body.getElementsByTagName("button");//5
        text [0].innerHTML="切";
        text [1].innerHTML='第二个按钮';
        text_id.innerHTML='id is you !';
        console.log(text[0]);
        console.log(text[1]);
        console.log(text_id);
        console.log(text_name);
        console.log(text_name[0]);
        console.log(text_tagname);
        console.log(btn);
    </script>
</body>
</html>

2.dom元素的事件

分为键盘事件鼠标事件窗口事件移动端的事件（触屏）等等多种，在js中，要在事件的前面加上 on ；（通俗来说，就是获取了元素后对它操作方法的不同做出的响应）

在元素的行内来绑定事件

简单的程序说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom 元素事件</title>
    <script>
        window.onload=function(){
            windowsload();
        }//上面两个配合显示刷新，只有加载完窗口后才触发下列事件
        function windowsload() {
            alert("windows");//弹窗
        }
        function up(){
            console.log('你在按键');    
        }
        function click_btn(){
            alert("你管我？");
        }
        function block(){
            console.log('ni');
        }
    </script>
</head>
<body onkeyup="up()">
    <button onclick="click_btn()">button</button>
    <div class="block" style="width: 200px;height: 200px;background-color: aquamarine;" onmouseover="block()"></div>
    
</body>
</html>

在脚本区动态绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态绑定事件</title>
    <script>
        //先将窗口加载完成后在完成事件
        window.onload=function(){
            var btn=document.getElementById('btn');
            btn.onclick=function(){
                alert('你好');
            }
            var btns=document.getElementsByClassName('btn');
            console.log(btns);
            for(var i=0;i<btns.length;i++){
                btns[i].onclick=function(){
                    alert('hello');
                    console.log('点我');
                }

            }
        }
    </script>
</head>
<body>
    <button id="btn">id</button>
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <button class="btn">4</button>
    <button class="btn">5</button>
</body>
</html>

事件的监听（用了老师的代码。总结很详细，且很好理解）

<!DOCTYPE html>
<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].onclick=function (){

                } //上一种动态绑定写法*/
                /*addEventListener()  简写方式   事件不带on*/
                btnlist[i].addEventListener("click",btnSave);//括号中写数组型的名称    执行的函数名称
                function btnSave(){
                    console.log("my");

                    //移除事件的监听
                    // 事件在页面初始化的时候  已经初始化完成  也就是说for已经执行完毕  i已经达到最大值 里面的i就是最大值
                    /*removeEventListener 在移除的时候 addEventListener 里面的内部函数得改成外部函数*/
                    /*this 在事件的回调函数里面指代的是当前事件的执行对象*/
                    this.removeEventListener("click",btnSave);
                }
            }
        }
    </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>

附上我的无备注代码以加深理解！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监听</title>
    <script>
        window.onload=function(){
            var btn_list=document.getElementsByClassName('btn_list');
            for(var i=0;i<btn_list.length;i++){
                btn_list[i].addEventListener('click',btnSave);
                function btnSave(){
                    console.log('my');
                    this.removeEventListener('click',btnSave);
                }  
            }
        }
    </script>
</head>
<body>
    <button class="btn_list">1</button>
    <button class="btn_list">2</button>
    <button class="btn_list">3</button>
    <button class="btn_list">4</button>
    <button class="btn_list">5</button>
</body>
</html>

至此，dom元素的获取和dom事件的执行大体上有了一个较全面的总结。

温故而知新！！！

dom元素事件的理解和应用

猜你喜欢