1.獲取DIV滾動條距離：
<style>
? ? ? ? #div1{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? ? ? #div2{
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 600px;
? ? ? ? ? ? background-color: aquamarine;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="div1" onclick="getScroll()">
? ? ? ? <div id="div2"></div>
? ? </div>
? ? <script>
? ? ? ? let div1 = document.getElementById('div1');
? ? ? ? /* onscroll不僅監聽y軸滾動條還監聽x軸滾動條 */
? ? ? ? div1.onscroll = function(){
? ? ? ? ? ? console.log(div1.scrollTop);
? ? ? ? ? ? console.log(div1.scrollLeft);
? ? ? ? }
? ? </script>
2.鍵盤事件：
用戶名：<input type="text" id="t">
? ? <script>
? ? ? ? let t = document.getElementById('t');
? ? ? ? t.onkeydown = function (e){
? ? ? ? ? ? let eObj = e||event
? ? ? ? ? ?/* 事件源對象 */
? ? ? ? ? ?console.log(e.keyCode);
? ? ? ? }
? ? ? ? /* 鍵盤按下時候觸發 */
? ? ? ? t.onkeydown = function (){
? ? ? ? ? ? console.log('鍵盤我按下');
? ? ? ? }
? ? ? ? /* 連續敲擊鍵盤時候觸發 */
? ? ? ? t.onkeypress = function (){
? ? ? ? ? ? console.log('連續按下鍵盤并抬起時觸發');
? ? ? ? }
? ? ? ? /* 鍵盤抬起的時候觸發 */
? ? ? ? t.onkeyup = function(){
? ? ? ? ? ? console.log('鍵盤我抬起了');
? ? ? ? }
? ? ? ? /* 順序 onkeydown>onkeypress>onkeyup */
? ? ? ? /* 在輸入框中輸入 字符 按下回車的時候 把輸入的字alert出來 */
? ? </script>
鍵盤事件練習：
<body>
? ? 用戶名：<input type="text" id="t">
? ? <script>
? ? ? ? let t = document.getElementById('t');
? ? ? ? /* 兼容寫法 */
? ? ? ? let eobj = e||event
? ? ? ? ? ? t.onkeypress = function (e){
? ? ? ? ? ? ?if(e.keyCode==13){
? ? ? ? ? ? ? ?/* alert(t.value) */
? ? ? ? ? ? ? ?alert(eobj.target.value)
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ? /* 在輸入框中輸入 字符 按下回車的時候 把輸入的字alert出來 */
? ? </script>
3.UI(用戶界面)事件：
<script>
? ? ? ? /* 因為執行JS獲取dom的時候元素還沒加載所以獲取不到 */
? ? ? ? /* 當整個頁面被加載完成時候調用 */
? ? ? ? window.onload = function(){
? ? ? ? let div1 = document.getElementById('div1');
? ? ? ? console.log(div1);
? ? ? ? window.onresize = function (){
? ? ? ? ? ? console.log('頁面尺寸改變');
? ? ? ? }
? ? }
? ? </script>
</head>
<body>
? ? <div id="div1">
? ? ? ? 我是div
? ? </div>
</body>
UI(用戶界面)事件練習：
<script>
? ? ? ? window.onload = function(){
? ? ? ? let div1 = document.getElementById('div1');
? ? ? ? alert(div1.innerHTML)
? ? ? ? }
? ? ? ? window.onresize = function (){
? ? ? ? ? ? console.log('頁面尺寸改變');
? ? ? ? ? ? div1.style.backgroundColor = 'red'
? ? ? ? }
</script>
<body>
? ? <!-- JS在head里面寫 點擊div alert出div里面的文字
? ? 頁面尺寸改變了，給div加個紅色背景 -->
? ? <div id="div1">我是div1</div>
</body>
4.鼠標點擊的位置：
<style>
? ? ? ? #div{
? ? ? ? ? ? margin: 50px;
? ? ? ? ? ? background-color: aquamarine;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="div1">
? ? </div>
? ? <script>
? ? ? let div1 = document.getElementById('div1')
? ? ? div1.onclick = function (e){
? ? ? ? ? /* 鼠標在文檔(是文檔document不是div1)的X軸位置 */
? ? ? ? ? console.log(e.clientX);
? ? ? ? ? /* 鼠標在文檔(是文檔document不是div1)的Y軸位置 */
? ? ? ? ? console.log(e.clientY);
? ? ? }
? ? </script>
5.事件默認行為：
<body>
? ? <!-- a標簽的跳轉是默認行為 -->
? ? <a >跳轉</a>
? ? <form action="9.轉義符號.html">
? ? ? ? <input type="submit" value="提交">
? ? </form>
? ? <script>
? ? ? ? let input = document.querySelector('input')
? ? ? ? input.onclick = function(e){
? ? ? ? ? ? ?console.log(1);
? ? ? ? ? ? ?//return false;
? ? ? ? ? ? ?e.preventDefault()
? ? ? ? }
? ? ? ? let a = document.querySelector('a');
? ? ? ? a.onclick = function (e){
? ? ? ? ? ? /* 取消默認事件的兩種方法 */
? ? ? ? ? ? this.style.backgroundColor = 'red'
? ? ? ? ? ? //return false
? ? ? ? ? ? /* 事件源對象里面的取消默認事件的方法 */
? ? ? ? ? ? e.preventDefault()
? ? ? ? ? ? /* 當你鼠標右擊的時候發生的事件 */
? ? ? ? ? ? document.oncontextmenu = function (e){
? ? ? ? ? ? ? ? ? ?alert('鼠標右擊了')
? ? ? ? ? ? ? ? ? ?return false
? ? ? ? ? ? ? ? ? ?e.preventDefault()
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
事件默認行為練習：
<style>
? ? ? ? ul{
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
</head>
<body>
? ? 鼠標右擊 禁止出現默認菜單，
? ? ? ? 出現新的自定義菜單 菜單A 菜單B 菜單C
? ? ? ? 出現的位置就是 鼠標的位置
? ? <div class="div1">
? ? ? <ul>
? ? ? ? ? <li>菜單1</li>
? ? ? ? ? <li>菜單2</li>
? ? ? ? ? <li>菜單3</li>
? ? ? </ul>
? ? </div>
? ? <script>
? ? ? ? let ul = document.querySelector('ul')
? ? ? ? let div = document.querySelector('div')
? ? ? ? document.oncontextmenu = function(e){
? ? ? ? ? ? ? e.preventDefault()
? ? ? ? ? ? ? ul.style.display = 'block'
? ? ? ? ? ? ? div.style.position = 'absolute'
? ? ? ? ? ? ? div.style.left = (e.clientX-15)+'px'
? ? ? ? ? ? ? div.style.top = (e.clientY-20)+'px'
? ? ? ? }
? ? </script>
6.拖拽組件：
<style>
? ? ? ? #div1{
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 150px;
? ? ? ? ? ? background-color: blueviolet;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 100px;
? ? ? ? ? ? top: 0px;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div id="div1">
? ? </div>
? ? <script>
? ? ? ? let div1 = document.getElementById('div1')
? ? ? ? div1.onmousedown = function (e) {
? ? ? ? ? ? let areaX = e.clientX - div1.offsetLeft
? ? ? ? ? ? console.log(areaX);
? ? ? ? ? ? let areaY = e.clientY - div1.offsetTop
? ? ? ? ? ? console.log(areaY);
? ? ? ? ? ? document.onmousemove = function (e){
? ? ? ? ? ? ? ?div1.style.left = e.clientX - areaX +'px'
? ? ? ? ? ? ? ?div1.style.top = e.clientY -areaY + 'px'
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? div1.onmouseup = function(){
? ? ? ? ? ? document.onmousemove = null
? ? ? ? }
? ? </script>
