//通过事件驱动修改外部引用的CSS文件中的样式

 //change_css.css

@CHARSET "UTF-8";
.div1{
    width: 600px;
    height: 500px;
    background-color: pink;
}

body{
    width: 600px;
    height: 500px;
    margin: 0 auto;
}

//change_css.html

<!DOCTYPE html>
<html>
  <head>
    <title>change_css.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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link rel="stylesheet" type="text/css" href="../css/change_css.css" />
      <script>
          function change(obj){
              //1.获取css中所有选择器,0表示获取第一个css文件
              //因为css文件可能引入多个,顺序是按照链接css文件的顺序来的
              //注意不同浏览器变量名不同(IE使用rules,Mozilla和Safasi使用cssRules)
              var all_css = document.styleSheets[0].cssRules;
              //2.0表示获取第一个选择器
              var s = all_css[0];
              //3.改变样式
              if(obj.value == "黑色")
                  s.style.backgroundColor = "black";
              else
                  s.style.backgroundColor = "red";
          }
      </script>
  </head>
  
  <body>
    <div id="d1" class="div1">
        <input type="button" value="红色"  style="margin-top: 250px; margin-left: 220px" onclick="change(this)"/>
        <input type="button" value="黑色"  style="margin-top: 250px; margin-left: 0px" onclick="change(this)"/>
    </div>
  </body>
</html>

 

//区分浏览器种类的代码

<script>
          function kind(){
              if(window.XMLhttpRequest){
                  if(!window.ActiveXObject)
                      alert("Mozilla, Safari");
                  else
                      alert("IE");
                  }
              else
                  alert("IE6");
          }
</script>

 

 

//并不是所有的html元素都有相同的event事件(对象), 比如提交按钮有onsubmit, 文本输入框就没有

例: 打开页面的时候弹窗提示, 选中文本框的时候弹窗提示并改变文本框颜色

<!DOCTYPE html>
<html>
  <head>
    <title>JS.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">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  
    <script>
        //创建页面弹窗,onload事件
        function is_load(){
            alert("Page Created!");
        }
        //选中文本框弹窗并改变文本框颜色,onfocus事件
        function is_choose(){
             alert("Text Choosed!");
             document.getElementById("t1").style.backgroundColor = "white";
        }
        //关闭浏览器弹窗,onbeforeunload事件,但是Chrome不支持
        function is_close(){
             alert("Page Will be Closed!");
        }
    </script>
  </head>
  
  <body onload="is_load()" onbeforeunload="is_close()" style="width: 600px; height: 500px; margin: 0 auto">
    <div id="d1" style="width: 600px; height: 500px; background-color: pink">
        <input type="button" value="红色"  style="margin-top: 210px; margin-left: 150px" onclick="kind()"/>
        <input id="t1" type="text" style="margin-top: 210px; margin-left: 0px; background-color: yellow" onfocus="is_choose()"/>
    </div>
  </body>
</html>

 

//关于窗口主要有三个事件:

onload, 创建窗口; onbeforeunload, 关闭窗口前一刻; onunload, 关闭窗口之后.

 

//防止用户通过右键拷贝网页内容

1. 直接在body内加一个oncontextmenu="return false", 点右键都不出右键菜单

<body oncontextmenu="return false" style="width: 600px; height: 500px; margin: 0 auto">

2. 也可以给oncontextmenu时间加上一个函数, 一点击右键就会弹窗警告, oncontextmenu事件必须带上return不然菜单还是会出来

    <script>
        function nomenu(){
            alert("版权所有，请勿复制");
            return false;
        }
    </script>
  
  <body oncontextmenu="return nomenu()" style="width: 600px; height: 500px; margin: 0 auto">

3. 以上两种方法不能防止用户把数据拉蓝然后用Ctrl + C拷贝, onselectstart事件可以控制不允许选中数据,

    方法同上return false也可再加弹窗警告

<script>
        function noslt(){
            alert("不允许选中!");
            return false;
        }
    </script>
  
  <body onselectstart="return noslt()" style="width: 600px; height: 500px; margin: 0 auto">

 

//关于鼠标的几个事件

onmousedown, 按下或点击

onmouseup, 松开点击

onmousemove, 移动鼠标

onmouseover, 悬停

onmouseout, 移走