【Python全栈-JavaScript】原生的JavaScript 之鼠标事件、键盘事件和HTML事件

原生的JavaScript 鼠标事件和键盘事件

JavaScript 鼠标事件有以下8种：

onmousedown
鼠标的键钮被按下。

onmouseup
鼠标的键钮释放弹起。

onclick
鼠标左键（或中键）被单击。

事件触发顺序是：onmousedown -> onmouseup -> onclick

ondblclick
鼠标左键（或中键）被双击。

事件触发顺序是：onmousedown -> onmouseup -> onclick -> onmousedown -> onmouseup -> onclick -> ondblclick。

oncontextmenu
弹出右键菜单，它可能是鼠标右键触发的，也可能是键盘的菜单键触发的。

onmouseover
鼠标移动到目标上方。

onmouseout
鼠标从目标上方移出。

onmousemove
鼠标在目标上方移动

注意：事件名称大小写敏感。若需要监听以上事件，则在事件名的前面加个on即可。

事件区别

onmouseover、onmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

全局事件对象event

event.x
事件发生时鼠标的位置

event.y
事件发生时鼠标的位置

button
鼠标的哪一个键触发的事件

0
鼠标左键
1
鼠标中键
2
鼠标右键

代码范例1:

<html>
  <body>
    <script type="text/javascript">
      function appendText(str) {
        document.body.innerHTML += str + "<br/>";
      }
      document.onmousedown = function() {
        appendText("onmousedown");
        appendText("button = " + event.button);
        appendText("(x,y) = " + event.x + "," + event.y);
      }
      document.onmouseup = function() {
        appendText("onmouseup");
      }
      document.onclick = function() {
        appendText("onclick");
      }
      document.ondblclick = function() {
        appendText("ondblclick");
      }
      document.oncontextmenu = function() {
        appendText("oncontextmenu");
      }
      document.onmouseover = function() {
        appendText("onmouseover");
      }
      document.onmouseout = function() {
        appendText("onmouseout");
      }
      document.onmousemove = function() {
        appendText("mousemove");
      }
    </script>
  </body>
</html>

代码范例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
</head>
<body>
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>

</body>
<script>
    function myClick() {
        console.log("你单击了按钮！");
    }
    function myDBClick() {
        console.log("你双击了按钮！");
    }
    function myMouseDown() {
        console.log("鼠标按下了！");
    }
    function myMouseUp() {
        console.log("鼠标抬起了！");
    }
    function myMouseOver() {
        console.log("鼠标悬浮！");
    }
    function myMouseOut() {
        console.log("鼠标离开！")
    }
    function myMouseMove() {
        console.log("鼠标移动！")
    }
    function myMouseEnter() {
        console.log("鼠标进入！")
    }
    function myMouseLeave() {
        console.log("鼠标离开！")
    }
    
</script>
</html>

JavaScript 键盘事件有以下3种：

keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
</head>
<body>

<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">

</body>
<script>
    
    /*输出输入的字符*/
    function myKeyDown(id) {
        console.log(document.getElementById(id).value);
    }
    /*按键结束，字体转换为大写*/
    function myKeyUp(id) {
        var text = document.getElementById(id).value;
        document.getElementById(id).value = text.toUpperCase();
    }
</script>
</html>

JavaScript HTML事件

load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
resize：窗口尺寸变化
scroll：滚动条移动
 
posted @ 2019-06-19 09:12  XJT2019  阅读(615)  评论(0)    收藏  举报