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>
