键盘事件
<body>
用户名：<input type="text" id="t">
<script>
let t = document.getElementById('t');
t.onkeydown = function (e){
/* 兼容写法 */
let eobj = e||event;
/* 事件源对象 */
console.log(eobj);
if(eobj.keyCode == 13){
// alert(this.value)
alert(eobj.target.value)
}
}
/* 在输入框中输入 字符 按下回车的时候 把输入的字 alert出来 */
/* 键盘按下的时候触发 */
// t.onkeydown = function (){
// console.log('键盘我按下了');
// }
// /* 连续敲击的时候触发 */
// t.onkeypress = function (){
// console.log('连续按下键盘并抬起的时候触发');
// }
// /* 键盘抬起的时候触发 */
// t.onkeyup = function (){
// console.log('键盘我抬起了');
// }
/* 顺序 onkeydown > onkeypress > onkeyup */
</script>
</body>
复制代码
用户界面事件
<script>
/* 当整个页面被加载完成(包括img图片也完全加载完毕)的时候调用 */
window.onload = function () {
/* 因为执行js获取dom的时候 元素还没加载 所以获取不到 */
let div1 = document.getElementById('div1')
div1.onclick = function (e){
console.log(e.target.innerText);
}
// console.log(div1.innerHTML);
}
/* js在head里面写 点击div alert出div里面的文字
页面尺寸改变了 给div加个红色的背景 */
/* 当页面尺寸发生变化的时候 dom文档已经加载完毕了 */
window.onresize = function () {
console.log('页面尺寸改变了');
document.getElementById('div1').style.background='red'
}
</script>
复制代码
阻止事件默认行为
<body>
<!-- a标签的跳转是默认行为 -->
<a href="http://www.baidu.com">跳转</a>
<form action="文字放大缩小.html">
<input type="submit" value="提交">
</form>
木兰词·拟古决绝词柬友
[ 清 ] 纳兰性德
人生若只如初见，何事秋风悲画扇。
等闲变却故人心，却道故人心易变。
骊山语罢清宵半，泪雨零铃终不怨。
何如薄幸锦衣郎，比翼连枝当日愿。
<script>
let input = document.querySelector('input');
input.onclick = function (e){
console.log(1);
// return false;
e.preventDefault();
}
/* 当你鼠标右击的时候会发生的事件 */
document.oncontextmenu = function (e){
// alert('鼠标右击了')
/* 禁用了右击鼠标出现的默认菜单 */
/* 这两种禁用方式的区别是
return false会阻止下面代码的执行 方法已经结束了
e.preventDefault()不会阻止下面代码执行 */
return false
// e.preventDefault()
console.log(1);
}
let a = document.querySelector('a');
a.onclick = function (e){
/* 取消默认事件 两种方法 */
this.style.background = 'red'
// return false
/* 事件源对象里面的取消默认事件的方法 */
// e.preventDefault();
}
</script>
</body>
复制代码
右击菜单
<style>
#div1{
width: 100px;
height: 200px;
background-color: bisque;
position: absolute;
left:0;
top:0;
display: none;
}
</style>
<body>
<div id="div1"></div>
<script>
/* 鼠标右击 禁止出现默认的菜单
显示一个自己的菜单 菜单A 菜单B 菜单C
出现的位置就是 鼠标的位置
div postion:absolute
top left clientX clientY
*/
let div1 = document.getElementById('div1');
document.oncontextmenu = function (e){
e.preventDefault();
div1.style.display = 'block';
console.log(e.clientX);
console.log(e.clientY);
div1.style.left = e.clientX + 'px'
div1.style.top = e.clientY + 'px'
}
</script>
</body>
复制代码
获得div中滚动条的距离
<style>
#div1 {
width: 300px;
height: 300px;
border: 1px solid #ccc;
padding: 5px;
overflow: auto;
}
#div2 {
width: 600px;
height: 600px;
background-color: aquamarine;
}
</style>
<body>
<div id="div1">
<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>
</body>
复制代码
拖拽组件
<style>
#div1{
width: 150px;
height: 150px;
background-color: blueviolet;
position: absolute;
left:100px;
top:0px;
}
</style>
<body>
<div id="div1"></div>
<script>
let div1 = document.getElementById('div1')
div1.onmousedown = function (e){
/* 按下的时候 获取点的位置 到盒子边界距离 */
let areaX = e.clientX - div1.offsetLeft;
let areaY = e.clientY - div1.offsetTop;
document.onmousemove = function (e){
/* 移动的时候获取的client的动态距离 - 盒子内点的到边缘的固定距离 */
/* 最后获得的 就是 盒子到文档的距离 */
div1.style.left = e.clientX - areaX + 'px'
div1.style.top = e.clientY - areaY + 'px'
}
}
div1.onmouseup = function (){
document.onmousemove = null;
}
</script>
</body>
