JS自学第六弹

JS函数对事件的处理：（废话不多说直接上代码）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JS DOM 事件</title>
</head>
<style>
    #box {
      height: 200px;
      width: 200px;
      background-color: #00ff00;
    }
  </style>
  <!-- onload="function()" -->
<body onunload="function2">
  <input type="text" onchange="function3()">
  <div id=“box” onmouseover="function4(this)" onmouseout="function5(this)" style="height: 200px;width: 200px;background-color: #00ff00;"></div>
  <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
</body>
<script>
  /* onload 事件： 页面加载时调用（可以对cookie进行处理） */ 
  function function1 () {
    // navigator对象包含有关浏览器的信息（所有浏览器都支持）
    // navigator.cookieEnabled检测浏览器cookie是否启用
    if(navigator.cookieEnabled == true){
      alert('cookie已经启用')
    }else{
      alert('cookie未启用')
    }
  };
  /* onunload事件：用户离开界面是被触发 */
  function function2 () {
    console.log("我离开了")
  };
  /* onchange事件： 当输入框改变时进行触发 */
  function function3 () {
    alert('我变了')
  };
  /* onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。 */
  function function4 (obj) {
    obj.innerHTML = "鼠标移入方框"
  };
  function function5 (obj) {
    obj.innerHTML = "鼠标移出方框"
  };
  /* onmousedown事件：鼠标按下时触发的事件 */
  function mDown(obj){
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="请释放鼠标按钮"
  }
  /* onmouseup 事件：鼠标抬起时触发的事件 */
  function mUp(obj){
    obj.style.backgroundColor="green";
    obj.innerHTML="请按下鼠标按钮"
  }
</script>
</html>
猜你喜欢
