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元素的获取

猜你喜欢