单击事件

给元素添加 单击事件
onclick: 鼠标的单击事件
方式一: 获取元素,在js中给元素绑定
备注: 直接赋值使用,不需要函数名

       	  
          <input type="button" class="ipt"  value="点我"/>
           <div class="box" style="width: 100px;height: 100px; border: 1px solid;"></div>
           <script>
           var btn = document.getElementsByClassName("ipt")[0];
           var box = document.getElementsByClassName("box")[0];
           btn.onclick = function(){   //当鼠标点击的btn的时候
               box.style.backgroundColor = "rgb(" + randomColor() + "," +       randomColor() + "," + randomColor() + ")";    //调用封装好的函数  
              }
               function randomColor(){
                   return Math.floor(Math.random()*(250-200)+200);
                   //将随机色封装在函数里
              }
           
          </script>

方式二: 定义好函数, 在html标签中 绑定函数

	 <button class="btn" onclick="myClick()">按钮</button>
 	<script>
 	 var  btn=document.querySelector("button");
    function myClick(){
                   box.innerHTML = "啊~~";//
              }
              
              btn.onclick = function(){
                   box.style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")";
              }
              </script>
发布了28 篇原创文章 · 获赞 0 · 访问量 296

猜你喜欢

转载自blog.csdn.net/weixin_46174967/article/details/104019078