Dom绑定事件的三种方式

Dom绑定事件的三种方式：

1.在标签上绑定 Dom0写法

例1：实现功能：鼠标放在tr标签上会变色，鼠标移开颜色消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">   <!--table的border外边框和内边框都管-->
        <tr οnmοuseοver="t1(0)" οnmοuseοut="t2(0)">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr >
        <tr οnmοuseοver="t1(1)" οnmοuseοut="t2(1)">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr οnmοuseοver="t1(2)" οnmοuseοut="t2(2)">
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

    </table>
    <script>
        function t1(n){
            var MyTrs=document.getElementsByTagName('tr')[n];
            MyTrs.style.backgroundColor='red';

        }
        function t2(n){
            var MyTrs=document.getElementsByTagName('tr')[n];
            MyTrs.style.backgroundColor='';
        }
    </script>
</body>
</html>

2.先获取Dom对象，然后绑定（一般建议使用这种方法）

实现例1的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--行为，样式，结构相分离的页面，即Js,css,html相互独立，即Dom1写法。-->
<body>
    <table border="1" width="300px">   <!--table的border外边框和内边框都管-->
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

    </table>

    <script>
        var MyTrs=document.getElementsByTagName('tr');
        var len=MyTrs.length;
        for(var i=0;i<len;i++){
            MyTrs[i].onmouseover=function(){
                this.style.backgroundColor='red';   //this代指上面的MyTrs[i],不能用MyTrs[i]的原因是存在作用域的问题
            }
            MyTrs[i].onmouseout=function(){
                this.style.backgroundColor='';
            }
        }
    </script>

</body>
</html>

3.获取Dom对象，利用addEventListener函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
        #main{
            background-color: #ff86eb;
            height:350px;
            width:500px;
        }
        #content{
            background-color: royalblue;
            height:150px;
            width:300px;

        }
    </style>
<body>
    <div id="main">
        <div id="content"></div>
    </div>
    <script>
        var MyMain=document.getElementById('main');
        var MyContent=document.getElementById('content');
        //addEventListener函数的第三个参数可以是false,true;false表示冒泡模型（程序从下到上冒泡执行）;true表示捕捉模型(从上到下正常执行)
        MyMain.addEventListener('click',function(){console.log('main')},false); //点击main区域只显示main的打印
        MyContent.addEventListener('click',function(){console.log('content')},false);  //点击content区域，会显示打印main和content
    </script>

</body>
</html>

来源：CSDN

作者：风从北方来

链接：https://blog.csdn.net/beifangdefengchuilai/article/details/80549157

标签

dom