获得div中滚动条的距离
/* 滚动条 滚动事件 */
/* document.onscroll=function(){
console.log(document.documentElement.scrollTop);
img.style.top = parseInt(top2) + parseInt(document.documentElement.scrollTop)+'px'
} */
let div1 = document.querySelector('#div1');
div1.onscroll=function(){
console.log(div1.scrollTop);
//console.log(div1.scrollLeft);
}
键盘事件
用户名: <input type="text" id="t">
<script>
let t = document.getElementById('t');
t.onkeydown = function (e) {
let eobj = e || event;
/* e代表事件原对象 */
console.log(e.keyCode);
/* 在输入框中输入字符 按下回车的时候 把输入的字 alert出来 */
if (eobj.keyCode == 13) {
alert(t.value)
/* alert(eobj.target.value) */
}
}
/* 键盘按下的时候触发 */
/* t.onkeydown = function () {
console.log('键盘我按下了');
} */
/* 连续敲击的时候触发 */
/* t.onkeypress = function () {
console.log('连续按下键盘并抬起的时候触发');
} */
/* 键盘抬起的时候触发 */
/* t.onkeyup = function () {
console.log('键盘我抬起了');
} */
/* 顺序 onkeydown > onkeypress > onkeyup */
</script>
UI事件
/* 当整个页面被加载完成(包括img图片也完全加载完毕)的时候调用 */
window.onload = function () {
let div1 = document.getElementById('div1');
div1.onclick=function(){
alert(div1.innerHTML)
}
window.onresize=function(){
console.log('页面尺寸改变');
div1.style.backgroundColor='red'
}
}
鼠标点击位置
<style>
#div1{
margin: 50px;
background-color: aqua;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
let div1=document.getElementById('div1');
div1.onclick=function(e){
/* 鼠标在文档的x轴的位置 */
console.log(e.clientX);
console.log(e.clientY);
}
</script>
</body>
阻止事件练习
let div=document.querySelector('div');
let li=document.getElementsByTagName('li');
console.log(li);
document.oncontextmenu=function(e){
e.preventDefault();
div.style.display='block';
div.style.position='absolute';
div.style.left=e.clientX+'px';
div.style.top=e.clientY+'px';
}
