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 href="http://www.baidu.com">跳转</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>
