CSS中的事件

顺晟科技

2021-09-09 12:24:06

195

　　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>

上一篇：CSS面试题下一篇：前端面试每日3 1 ——第881天

网站建设

Css

CSS中的事件