发表于： 2020-04-16 22:10:44

1 2165

一、今天完成的事情

div随鼠标的移动
<style>
#box1{
width:100px;
height: 100px;
background-color: red;
/*
* 开启box1 的绝对定位
*/
position: absolute;
}
</style>
<script>
window.onload = function () {
/*
* 使div可以跟随鼠标移动
* */
//获取div
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function (event) {
// //解决兼容问题,现在各版本浏览器已经兼容
// event = event || window.event;
//获取鼠标的坐标
/*
* clientX和clientY
* 用于获取鼠标在当前的可见窗口的坐标
* div的偏移量是相对于整个页面的
* */
// var x = window.event.clientX;
// var y = window.event.clientY;
/*
* pageX和pageY是相对于整个页面的鼠标的移动偏移量
* 但是这两个属性在IE8 中不支持，所以如果需要兼容IE8，不建议使用
* */
var x = window.event.pageX;
var y = window.event.pageY;
//设置div的偏移量
box1.style.left = x + "px";
box1.style.top = y + "px";
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
事件的冒泡
<style>
#box1{
width: 200px;
height: 200px;
background-color: aqua;
}
#s1{
background-color: yellowgreen;
}
</style>
<script>
window.onload = function () {
/*
* 事件的冒泡（Bubble）
* - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
* - 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
* */
//为 s1 绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function () {
alert("222")
//取消冒泡
//可以将事件对象的cancelBubble设置为true，即可取消冒泡
event.cancelBubble = true;
};
//为 box1 绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function () {
alert("111")
};
//为body绑定一个单击响应函数
document.body.onclick = function () {
alert("000")
};
}
</script>
</head>
<body>
<div id="box1">
我是box1<span id="s1">我是span</span>
</div>
</body>
冒泡的应用
事件的委派
<script>
window.onload = function () {
//点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//创建一个li
var li = document.createElement("li");
li.innerHTML = '<a href=\"javascript:\">新建超链接</a>';
//将li添加到ul中
u1.appendChild(li);
};
/*
* 为每一个超链接绑定一个单击响应函数
* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
* 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
*
* */
var a = document.getElementsByTagName("a");
//遍历
// for (var i = 0 ; i < a.length;i++){
// a[i].onclick =function () {
// alert("我是a的")
// };
// }
/*
* 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
* 我们可以尝试将其绑定给元素的共同的祖先元素
*
* 事件的委派
* - 指将事件同一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
* 从而通过祖先元素的响应函数来处理事件
* - 事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*
* */
//为 ul 绑定一个单击响应函数
u1.onclick =function (event) {
/*
* target
* - event 中的target表示的触发事件的对象
* */
//如果触发事件的对象是我们期望的元素，则执行，否则不执行
if(event.target.className == "link"){
alert("999")
}
}
};
</script>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1">
<li><a href="javascript:" class="link">超链接一</a></li>
<li><a href="javascript:" class="link">超链接二</a></li>
<li><a href="javascript:">超链接三</a></li>
<li><a href="javascript:">超链接四</a></li>
</ul>
事件的绑定
window.onload = function () {
/*
* 点击按钮之后弹出一个内容，
* */
//获取按钮对象
var btn01 = document.getElementById("btn01");
/*
* 使用 对象.事件 = 函数 的形式绑定响应函数
* 他只能同时为一个元素的一个事件绑定一个响应函数
* 不能绑定多个，如果绑定了多个，则后边会覆盖掉前面的
* */
//为btn01绑定一个单击响应函数
// btn01.onclick = function () {
//
// };
//为btn02绑定第二个单击响应函数
// btn01.onclick = function () {
//
// }
/*
* addEventListener()
* - 通过这个方法也可以为元素绑定响应函数
* - 参数：
* 1.事件的字符串，不要 on
* 2.回调函数，当事件触发时该函数会被调用
* 3.是否在捕获阶段触发事件，不要一个布尔值，一般都传false
*
* 使用 addEventListener() 可以同时为一个元素的相同事件同时绑定多个响应函数，
* 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
*
* 这个方法不支持IE8 及以下的浏览器
* */
// btn01.addEventListener("click",function () {
// alert("999")
// },false);
// btn01.addEventListener("click",function () {
// alert("是不是")
// },false);
/*
* attachEvent()
* - 在IE8中可以使用 attachEvent() 来绑定事件
* - 参数
* 1.事件的字符串，要on
* 2.回调函数
* - 这个方法也可以同时为一个事件绑定多个处理函数
* 不同的是它是后绑定先执行，执行顺序和addEventListener（）相反
* */
// btn01.attachEvent("onclick",function () {
// alert(678)
// });
//定义一个函数，用来为指定元素绑定单击响应函数
/*
* addEventListener()中的this，是绑定事件的对象
* attachEvent（）中的this，是window
* 需要统一两个方法this
* */
/*
* 参数
* obj 要绑定的事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
* */
function bind(obj,eventStr,callback) {
if (obj.addEventListener) {
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else {
/*
* this是谁由调用方式决定
* callback.call(obj)
* */
//IE8 及以下
obj.attachEvent("on"+eventStr,function () {
callback();
});
}
}
bind(btn01,"click",function () {
alert("可以吗？");
})
};
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
事件的传播
<style>
#box1{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2{
width: 200px;
height: 200px;
background-color: aquamarine;
}
#box3{
width: 100px;
height: 100px;
background-color: coral;
}
</style>
<script>
window.onload = function () {
/*
* 分别为三个盒子绑定单击响应函数
* */
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
bind(box1,"click",function () {
alert("我是box1")
});
/*
* 事件的传播
* - 关于时间的传播网景公司和微软公司有不同的理解
* - 微软公司认为事件是由内向外传播的，也就是当事件触发时，应该先触发当前元素上的事件
* 然后再向当前元素的祖先元素上传播，事件应该在冒泡阶段执行
* - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先出法当前元素的最外层的祖先元素的事件
* 然后再向内传播给后代元素
* - W3C综合了两个公司的方案，将事件的传播分成了三个阶段
* 1.捕获阶段
* - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
* 2.目标阶段
* - 事件捕获到了目标元素，捕获结束开始在目标元素上触发事件
* 3. 冒泡阶段
* - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
*
* - 如果希望在捕获阶段就触发事件，可以将addEventListener（）的第三个参数设置为true
* 一般情况下，我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
*
* - IE8 及以下的浏览器中没有捕获阶段
* */
bind(box2,"click",function () {
alert("我是box2")
});
bind(box3,"click",function () {
alert("我是box3")
});
};
function bind(obj,eventStr,callback) {
if (obj.addEventListener) {
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else {
/*
* this是谁由调用方式决定
* callback.call(obj)
* */
//IE8 及以下
obj.attachEvent("on"+eventStr,function () {
callback();
});
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
拖拽
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
}
</style>
<script>
window.onload = function () {
/*
* 拖拽
* - 拖拽box1的流程
* 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2.当鼠标开始移动时，被拖拽元素跟随鼠标移动 ommousemove
* 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
* */
var box1 = document.getElementById("box1");
box1.onmousedown =function (event) {
//div的水平偏移量，clientX - 元素.offsetLeft
//div的垂直偏移量，clientY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot =event.clientY - box1.offsetTop;
//为document绑定一个鼠标移动事件
document.onmousemove = function (event) {
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
//获取鼠标的坐标
var x = event.clientX - ol;
var y = event.clientY - ot;
//修改 box1的位置
box1.style.left = x + "px";
box1.style.top = y + "px";
};
//为document添加一个鼠标松开事件
document.onmouseup =function () {
//当鼠标松开时，被拖拽的元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
/*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
* 如果不希望发生这个行为，则可以通过return false来取消默认行为；
*
* 但是对IE8 不起作用
* */
return false;
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
鼠标的滚轮事件
<style>
#box1{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script>
window.onload = function () {
/*
* 当鼠标滚轮向下滚动时，box1变长
* 当滚轮向上滚动时，box1变短
* */
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标滚轮滚动的事件
/*
* onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发
* 但是火狐不支持该属性
*
* 在火狐中需要使用DOMMouseScroll 来绑定滚轮滚动事件
* 该事件需要通过
* */
box1.onmousewheel = function () {
// event.wheelDelta; 可以获取滚轮滚动的方向
//向上滚120，向下滚-120
// event.wheelDelta; 我们不看大小，只看正负
// event.wheelDelta;在火狐中不支持，我们在火狐中用event.detail来获取滚轮滚动的方向，向上滚是-3，向下滚是3
event.wheelDelta;
if (event.wheelDelta > 0) {
// alert("向上");
box1.style.height = box1.clientHeight - 5 + "px";
} else{
box1.style.height = box1.clientHeight + 5 + "px";
}
/*
* 使用addEventListener()方法绑定响应函数，取消默认行为时，不能使用return false，火狐不行
* 需要使用event来取消默认行为
* event.preventDefault();
* 但是IE8不支持event.preventDefault();这个直接调用会报错
* */
/*
* 当滚轮移动时，如果浏览器有滚动条，滚动条会随之滚动
* 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
* */
return false;
};
};
</script>
</head>
<body style="height: 2000px">
<div id="box1"></div>
</body>
键盘事件
键盘字母上面的数字键不能在input框里面进行输入
<script>
window.onload = function () {
/*
* 键盘事件
* onkeydown
* - 按键被按下
* - 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
* - 当onkeydown连续触发时，第一次和第二次之间间隔会稍微长一点，其他的会非常快
* onkeyup
* - 按键被松开
*
* 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
*
* */
document.onkeydown = function (event) {
// alert("33")
/*
* 可以通过keyCode来获取按键的编码
* - 通过它可以判断哪个按键被按下
*
* 除了keyCode，事件对象中还提供了几个属性
* altKey
* ctrlKey
* shiftKey
* - 这三个用来判断alt ctrl 和 shift是否被按下
* 如果是则返回true，否则返回false
* */
//判断 y 是否被按下
// if (event.keyCode == 89){
// console.log("y被按下了")
// }
//判断y和Ctrl是否同时被按下
};
//获取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function (event) {
console.log("按下了");
//在文本框中输入内容，属于onkeydown默认行为
//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
event = event || window.event;
//数字48 - 57
//使文本框中不能输入数字
if (event.keyCode >= 48 && event.keyCode <= 57){
return false;
}
//
};
// document.onkeyup =function () {
// alert("22")
// };
}
</script>
</head>
<body>
<input type="text">

键盘事件的练习<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>键盘事件的练习</title><style>#box1{width: 100px;height: 100px;background-color: red;position: absolute;}</style><script>window.onload = function () {/** 是div可以根据不同的方向键向不同的方向移动* *///为document绑定一个按键按下的事件document.onkeydown = function (event) {event = event || window.event;//定义一个变量，表示移动的速度var speed = 10;//当用户按了Ctrl之后速度加快if (event.ctrlKey){speed = 100;}//console.log(event.keyCode);/** 37 左* 38 上* 39 右* 40 下* */switch (event.keyCode){case 37://alert("向左");left 值减小box1.style.left = box1.offsetLeft - speed +"px";break;case 38://alert("向上");box1.style.top = box1.offsetTop - speed +"px";break;case 39://alert("向右");box1.style.left = box1.offsetLeft + speed +"px";break;case 40://alert("向下");box1.style.top = box1.offsetTop + speed +"px";break;}}}</script></head><body><div id="box1"></div></body></html>

二、遇到的困难

无

三、要做的事情

继续学习

四、收获

学习了鼠标事件，滚轮事件，键盘事件等等

上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1