DOM常用事件绑定方式与实例

一、常用的事件

onclick 点击事件

模态框实例

<input type="button" id="b1" style="width:50px;height:50px" onclick="display()"/>
     <!-- 背景层 -->
     <div id="d1" class="a1 hidden "></div>
     <!--背景层结束 -->
     <div id="d2" class="a2 hidden">
         <p>用户<input type="text"/></p>
         <p>密码<input type="password"/></p>
         <input type="button" value="确认"/>
         <input id="b2" type="button" value="取消" onclick="hidd()"/>
     </div>

     <script>
         function display(){
             document.getElementById('d1').classList.remove('hidden');
             document.getElementById('d2').classList.remove('hidden');
         }

         function hidd(){
             document.getElementById('d1').classList.add('hidden');
             document.getElementById('d2').classList.add('hidden');
         }
     </script>

　　

2、onfocus 焦点聚集 onblur 焦点移开 。这个是需要鼠标点击的

搜索框实例

<input  type="text" id="i1" value="请输入关键字" onfocus="disappear()" onblur="appear()">

     <script>
            function disappear(){
                console.log(1)
                var tag = document.getElementById('i1');
                var value=tag.value;
                if(value=="请输入关键字"){
                    tag.value='';
                }
            };
            function appear(){
                console.log(2)
                var tag = document.getElementById('i1');
                if (tag.value==''){
                    tag.value='请输入关键字';
                }

            };
     </script>

　　

3、onmouseover、onmouseout  鼠标放在上面、鼠标移开实例

  <div class="c1" id="1">
         <div id="2">来找我玩啊</div>
     </div>
     <script>
         var tag = document.getElementById('2');
         console.log('1' , tag);
         tag.onmouseover=function(){
             var content=this.innerText;
         console.log(content);
         this.innerText='去你大爷的吧';};
         tag.onmouseout=function(){
             this.innerText='来找我玩啊'
         };
     </script>

　　

二、DOM绑定的两种方式

一种是直接在绑定在标签上

<div onclick='函数名（）'></div>

这种绑定方式被称为DOM0

第二种绑定的方式是先找到标签，然后在绑定事件

  var tag = document.getElementById('2');tag.onclick = function(){} 

这种绑定方式是DOM1推荐使用这种绑定方式。同时dom1this关键字，代指的是当前标签、或者用一句话理解，就是谁调用他，this就指向哪个标签。