JS里的dom元素

最新推荐文章于 2024-08-07 17:12:09 发布

yudbk

最新推荐文章于 2024-08-07 17:12:09 发布

阅读量293

点赞数 1

文章标签：前端知识学习总结 JavaScript

本文链接：https://blog.csdn.net/weixin_43661559/article/details/85252572

版权

dom：全称为document object model（文本对象模型），document对象值的是HTML的所有对象。

一、dom的获取方式

（1）getElementsByClassName：获取元素时，getElementsByClassName获取出来的对象是集合类型（即数组类型），因为class可以绑定多个元素。集合类型就有长度属性，用length属性代表长度。

（2）getElementById：获取的是唯一的元素，因为id只具有唯一性。

（3）getElementsByName：通过元素的name名称获取。

（4）getElementsByTagName：是通过元素本身的名称获取。

二、dom元素的事件

js里面的事件分为键盘事件、鼠标事件、窗口事件和移动端的事件（触屏）。

键盘事件包括keydown、keyup、keypress

鼠标事件包括mousedown 、mouseup、click、doubleclick、mouseenter 、mouseleave、mouseout 、mouseover 、mousemove

窗口事件包括load 、focus、blur

在加入事件时要在前面加入on，例如onclick、onmousemove。

1.在行内绑定事件

<body>
<button onclick="dianji()">按钮</button>
<div class="block" onmousemove="yidong()" onmouseleave="likai()"></div>
<body>

<script>
    function dianji(){
        alert("你点击此处了");
    }
    function windowsload(){
        alert("你刷新了界面");
    }
    function yidong(){
        console.log("你在移动");
    }
    function key(){
        console.log("你在按键")
    }
    function likai(){
        console.log("你离开了")
    }
</script>

2.在脚本区域动态绑定

<body>
<button id="btn">按钮</button>
<button class="btnclass">btn&class</button>
<button class="btnclass">btn&class</button>
<button class="btnclass">btn&class</button>
<button class="btnclass">btn&class</button>
</body>

<script>
        window.onload=function(){
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            alert("单击");
        }
        btn.onmouseover=function(){
            alert("悬停此处");
        }
        var btnclass=document.getElementsByClassName("btnclass");
        for(var i=0;i<btnclass.length;i++){
            btnclass[i].onclick=function(){
                alert("点击btnclass");
            }
        }
    }
</script>

3.添加事件的监听

<body>
<button class="btnlist">按钮</button>
<button class="btnlist">按钮</button>
</body>

<script>
    window.onload=function(){
        var btnlist=document.getElementsByClassName("btnlist");
        for(var i=0;i<btnlist.length;i++){
            /*addEventListener()  简写方式   事件不带on*/
            btnlist[i].addEventListener("click",dianji);
            function dianji(){
                console.log("已点击");
                this.removeEventListener("click",dianji);
            }
        }
    }
</script>

移除事件的监听用removeEventListener语句，有注意的是在移除的时候 addEventListener 里面的内部函数得改成外部函数。

三、事件的冒泡和委托及阻止

1.事件的冒泡

<body>
<div class="block">
    <button class="btn">按钮</button>
</div>
<script>
    var count=0;
    var b=document.getElementsByClassName("block")[0];
    var btn=document.getElementsByClassName("btn")[0];
    b.onmouseup=function(){
        count++;
        console.log(count);
    }
    btn.onmouseup=function(){
        count++;
        console.log(count);
        event.stopPropagation();
    }
</script>
</body>

事件的冒泡在多数时候会进行阻止，用event.stopPropagation(); 可以阻止事件的冒泡。

2.阻止事件的默认行为

事件存在默认行为自带的默写功能，默认功能可以进行处理，处理语句如下：

（1）event.preventDefault();return false;

（2）window.οncοntextmenu=function (){event.preventDefault();return false;}

（3）window.οnclick=function (){return false;}

其中event.stopPropagation() 语句可以处理事件冒泡，但是不能阻止事件的默认行为。

3.事件的委托

事件的委托是为了优化代码的性能。

<body>
<ul class="menu">
    <li class="lilist">菜单1</li>
    <li class="lilist">菜单2</li>
    <li class="lilist">菜单3</li>
</ul>
<script>
    var menu = document.getElementsByClassName("menu");
    menu[0].onclick=function(event){
        var target=event.target;
        if (target.nodeName.toLowerCase() == "li") {
            target.style.backgroundColor = "silver";
        }
    }
</script>
</body>

四、事件的参数

以鼠标的参数为例，代码如下：

<script>
    window.onload=function (){
        var b=document.getElementsByClassName("block")[0];
        b.onmousemove=function (e){
            console.log(e);
            var x=e.clientX || e.pageX;
            var y=e.clientY || e.pageY;
            console.log("X:"+x+",Y:"+y);
        }
    }
</script>

在设置好的class为block的div快中移动鼠标时会处罚该事件，在控制器中输出的事对应的鼠标所在的位置坐标。