dom事件的绑定以及dom元素的获取

一、事件的绑定

(1)dom元素事件:鼠标事件

  • 有click(点击)、mouseenter(鼠标移入)、mousemove(鼠标移动)、mouseleave和mouseout(鼠标离开)、
  • mouseleave和mouseout鼠标离开事件的区别:mouseout——水平垂直方向的离开、mouseleave——水平离开

(2)事件的绑定方法

  • 在页面元素之内直接进行事件的绑定
  • dom元素操作进行事件绑定
  • 事件的监听进行事件绑定

第一种:在页面元素之内直接进行事件的绑定

<button onclick="">按钮</button>

给""里面添加点击事件发生执行的函数名

第二种:dom元素操作进行事件绑定

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

  • 通过id获取dom元素
var btn=document.getElementById("btn");
    btn.onclick=function (){
        /*触发事件执行的代码区域*/
    }

  • 通过class获取dom元素
    var btnclass=document.getElementsByClassName("btnc");//得到的对象是数组

绑定方法一:

    /*注意:js不能操作隐式迭代(不能操作一堆元素)*/
    for(var i=0;i<btnclass.length;i++)
    {
        /*给当前的绑定对象间接赋值  可以直接获取  对应的i值*/
        btnclass[i].index=i;
        btnclass[i].onclick=function (){
            /* 如果直接赋i值,即alert(i);  会直接弹i的最大值 弹出值分别为2,2,2*/
            alert(this.index);    /*this事件里面的执行对象就是当前要获取的对象     弹出值分别为0,1,2*/
        }
    }

绑定方法二:

    for(var i=0;i<btnclass.length;i++)
    {
        (function (args){
            btnclass[i].onclick=function (){
                alert(args);
            }
        })(i);
    }

绑定方法三:

    for(var i=0;i<btnclass.length;i++)
    {
        var add=function (args){
            return function (){
                console.log(args);
            };
        };
        btnclass[i].onclick=add(i);
    }
第三种:事件的监听进行事件的绑定
<div id="btnb">
    <button id="btn_add">事件的监听</button>
</div>

冒泡原则:从子元素事件往外扩散

阻止事件冒泡的方法:return false;event.preventDefault();  event.defaultPrevented();   event.stopPropagation();

var btnadd=document.getElementById("btn_add");
var btnblock=document.getElementById("btnb");
    /*如果第三个参数不写  默认冒泡原则  从子元素事件往外扩散*/
    btnblock.onclick=function(){
       console.log(2);
    }
    btnadd.onclick=function (){
        console.log(1);     //会默认冒泡原则,输出 1 2
        /*若在这加入event.stopPropagation();可以阻止事件冒泡。输出为 1*/

事件的监听:

    var btnadd=document.getElementById("btn_add");
    var btnblock=document.getElementById("btnb");
/*方法一:*/
    btnblock.addEventListener("click",function (){    
        console.log(2);
    });
    btnadd.addEventListener("click",function (){
        console.log(1);
    });
    btnadd.addEventListener("mouseenter",function (){
        console.log(2);
    })
/*方法二:*/
    btnadd.addEventListener("click",showbtnnum); 
    function showbtnnum(){
        alert(1);
    }

移除事件的监听:

    var btnadd=document.getElementById("btn_add");
    btnadd.addEventListener("click",addbtn)
    function addbtn(){
        console.log(2);
        //移除事件  以及移除事件的方法
        this.removeEventListener("click",addbtn);
    }
    btnadd.onclick=function (){
        console.log(2);
        //执行完之后移除该事件
        this.onclick=null;
    }

二、dom元素的获取:

/*1.DOM元素的获取   4个*/
    /* class   id   Name  TagName*/

1.DOM元素的获取   4个:class、id、Name、TagName

     document.getElementsByClassName()
     document.getElementsByName()
     document.getElementById()
     document.getElementsByTagName()

2.获取元素的内容:

  • innerHtml   获取的是元素的所有html内容
  •  innerText   获取的是元素的文本

3.获取前后同胞元素

  • nextElementSibling  获取下一同胞元素
  • nextSibling  获取同胞节点
  • previousElementSibling   获取上一个同胞元素
  • previoElementSibling  获取上同胞节点

4.前后元素的追加

  • appendChild()  当前元素的内容之后追加
  • insertBefore(new child,old child); 在旧的子集元素之前追加新的元素

5.dom元素创建

  • document.creatElement("");

6.元素的删除

  • removechild  删除当前对象里面的子集元素
  • remove  删除元素

7.替换元素

  • replaceChild()

8.获取节点的方法

  • childNodes   集合(nodetype  nodevalue)

9.获取子集元素

  • children   子集元素
  • firstChild  第一个子元素 
  • lastChild   最后一个子元素
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

dom事件的绑定以及dom元素的获取

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭