CSS中的事件

  1.多个点击事件的研究

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>onclick.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 此处演示多个点击事件 -->
    <script type="text/javascript">
        function onlick(){
            //获取dum对象的id属性
            var bun=document.getElementById("inp");
            //当dom对象发生点击事件时,弹出你好对话框
            bun.onclick=function(){
             alert('你好');
             };
             
             //当发生第二个点击事件是,会覆盖上面的一个事件
             bun.onclick=function(){
             alert('你也好');
             };    
        }
    </script>
  </head>
  
  <body onload="onlick()">
        <input id="inp" type="button" value="按钮">
  </body>
</html>

  2.不同浏览器下的点击事件分析

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>onclick.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- 此处演示多个点击事件 -->
    <script type="text/javascript">
        function onlick(){
            //获取dum对象的id属性
            var bun=document.getElementById("inp");
            //attachEvent表示IE浏览器
            //addEventListener 表示火狐 或者是谷歌浏览器
            
            //此判断是否是ie览器
            if(bun.attachEvent){
                //如果是,则使用ie浏览器的点击事件 ,注此处的Ie使用的是栈,先进后出的形式 
                //IE的事件标准为Onclick
                bun.attachEvent("onclick",function(){
                    alert("IE下点击了按钮");
                });
                bun.attachEvent("onclick",function(){
                    alert("IE下再次点击了按钮");
                });
            }else{
                //次处使用的方式是w3c的标准
                //否则的话便是用CHROME谷歌 FF火狐  注:此处使用的是队列的形式,先进先出
                //火狐谷歌的事件为click   
                bun.addEventListener("click",function(){
                    alert("火狐下点击了按钮");
                });
                bun.addEventListener("click",function(){
                    alert("火狐下再次点击了按钮");
                });
            }
        }
    </script>
  </head>
  
  <body onload="onlick()">
        <input id="inp" type="button" value="按钮">
  </body>
</html>

 

posted @ 2017-06-27 20:42  lszan  阅读(1214)  评论(0编辑  收藏  举报