JavaScript基础视频教程总结（111-120章）
程序员文章站
2022-05-17 14:50:05
所有基础课程链接： 1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章） 5. JavaScript基 ......
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>111-120章总结</title>
</head>
<body>
<pre>
111. 事件对象
- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。
</pre>
<style type="text/css">
#areadiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showmsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<div id="areadiv"></div>
<div id="showmsg"></div>
<script type="text/javascript">
console.log("第111");
//当鼠标在areadiv中移动时，在showmsg中来显示鼠标的坐标
var areadiv = document.getelementbyid("areadiv")
var showmsg = document.getelementbyid("showmsg")
areadiv.onmousemove = function(event){
event = event || window.event
var x = event.clientx
var y = event.clienty
var result = "x coords: " + x + ", y coords: " + y
showmsg.innerhtml = result
}
</script>
<pre>
112. div跟随鼠标移动
clientx和clienty
用于获取鼠标在当前的可见窗口的坐标
div的偏移量，是相对于整个页面的
pagex和pagey可以获取鼠标相对于当前页面的坐标
但是这个两个属性在ie8中不支持，所以如果需要兼容ie8，则不要使用
</pre>
<style type="text/css">
#box1{
/*开启box1的绝对定位*/
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
#box2{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="yibox" style="width: 2000px;height: 200px;position: relative;">
<div id="box1"></div>
<div id="box2"></div>
</div>
<script type="text/javascript">
console.log("第112");
var yibox = document.getelementbyid("yibox")
var box1 = document.getelementbyid("box1")
var box2 = document.getelementbyid("box2")
var boxwidth = box1.clientwidth / 2
var boxheight = box1.clientheight / 2
var yiboxheight = yibox.offsettop
yibox.onmousemove = function(event){
event = event || window.event
var left = event.clientx
var top = event.clienty
// 获取滚动条滚动的距离
// chrome认为浏览器的滚动条是body的，可以通过body.scrolltop来获取
// 火狐等浏览器认为浏览器的滚动条是html的，
var st = document.body.scrolltop || document.documentelement.scrolltop;
var sl = document.body.scrollleft || document.documentelement.scrollleft;
// 鼠标光标位置在正中间
//box1.style.left = left + sl - boxwidth + "px"
//box1.style.top = top + st - boxheight - yiboxheight + "px"
box1.style.left = left + sl + "px"
box1.style.top = top + st - yiboxheight + "px"
event.cancelbubble = true;
}
box2.onmousemove = function(event){
event = event || window.event;
event.cancelbubble = true;
};
</script>
<pre>
113. 事件的冒泡
事件的冒泡（bubble）
- 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
</pre>
<style type="text/css">
#mbox1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#ms1{
background-color: yellow;
}
</style>
<div id="mbox1">我是box1
<span id="ms1">我是span</span>
</div>
<script type="text/javascript">
console.log("第113");
var mbox1 = document.getelementbyid("mbox1")
var ms1 = document.getelementbyid("ms1")
// 为ms1绑定一个单击响应函数
ms1.onclick = function(event){
event = event || window.event
alert("我是span的单击响应函数")
//可以将事件对象的cancelbubble设置为true，即可取消冒泡
event.cancelbubble = true
}
// 为mbox1绑定一个单击响应函数
mbox1.onclick = function(event){
event = event || window.event
alert("我是div的单击响应函数")
event.cancelbubble = true
}
//为body绑定一个单击响应函数
/*document.body.onclick = function(){
alert("我是body的单击响应函数");
};*/
</script>
<pre>
114. 事件的委托
- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。
- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
</pre>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li><p>我是p元素</p></li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
<script type="text/javascript">
console.log("第114");
var btn01 = document.getelementbyid("btn01")
var u1 = document.getelementbyid("u1")
var n=1
btn01.onclick = function(event){
event = event || window.event
var newli = document.createelement("li")
newli.innerhtml = "<a href='javascript:;' class='link'>新建的超链接" + n + "</a>"
u1.appendchild(newli)
n++
event.cancelbubble = true
}
/*
* 为每一个超链接都绑定一个单击响应函数
* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
* 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
*/
var alla = document.getelementsbytagname("a")
/*for( var i=0,l=alla.length; i<l; i++){
alla[i].onclick = function(){
alert(this.innerhtml)
}
}*/
// 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
// 我们可以尝试将其绑定给元素的共同的祖先元素
u1.onclick = function(event){
event = event || window.event
// event中的target表示的触发事件的对象
//alert(event.target)
//如果触发事件的对象是我们期望的元素，则执行否则不执行
if(event.target.classname == 'link'){
alert(event.target.innerhtml)
}
}
</script>
<pre>
115. 事件的绑定
使用 对象.事件 = 函数 的形式绑定响应函数，
它只能同时为一个元素的一个事件绑定一个响应函数，
不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。
addeventlistener()
- 通过这个方法也可以为元素绑定响应函数
- 参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addeventlistener()可以同时为一个元素的相同事件同时绑定多个响应函数，
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持ie8及以下的浏览器。
attachevent()
- 在ie8中可以使用attachevent()来绑定事件
- 参数：
1.事件的字符串，要on
2.回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数，
不同的是它是后绑定先执行，执行顺序和addeventlistener()相反
</pre>
<div class="">
<button id="bdbtn">绑定按钮</button>
</div>
<script type="text/javascript">
console.log("第115");
var bdbtn = document.getelementbyid("bdbtn")
/*bdbtn.onclick = function(){
alert(1)
}
bdbtn.onclick = function(){
alert(2)
}*/
bdbtn.addeventlistener("click",function(){
alert(1)
},false)
bdbtn.addeventlistener("click",function(){
alert(2)
},false)
/*bdbtn.attachevent("onclick",function(){
alert(this)
})
bdbtn.attachevent("onclick",function(){
alert(this)
})*/
</script>
<pre>
116. 完成bind函数
</pre>
<div class="">
<button id="bdbtn2">bind按钮</button>
</div>
<script type="text/javascript">
console.log("第116");
//定义一个函数，用来为指定元素绑定响应函数
/*
* 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)
*/
obj.attachevent( "on"+eventstr , function(){
//在匿名函数中调用回调函数
callback.call(obj)
})
}
}
var bdbtn2 = document.getelementbyid("bdbtn2")
bind(bdbtn2,"click",function(){
alert(1)
})
bind(bdbtn2,"click",function(){
alert(2)
})
bind(bdbtn2,"click",function(){
alert(this)
})
</script>
<pre>
117. 事件的传播
- 关于事件的传播网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，
然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，
然后在向内传播给后代元素
- w3c综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
- 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
- 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
- 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
- 如果希望在捕获阶段就触发事件，可以将addeventlistener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
- ie8及以下的浏览器中没有捕获阶段
</pre>
<style type="text/css">
#cbbox1{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#cbbox2{
width: 200px;
height: 200px;
background-color: yellow;
}
#cbbox3{
width: 150px;
height: 150px;
background-color: skyblue;
}
</style>
<div id="cbbox1">cbbox1
<div id="cbbox2">cbbox2
<div id="cbbox3">cbbox3</div>
</div>
</div>
<script type="text/javascript">
console.log("第117");
var cbbox1 = document.getelementbyid("cbbox1")
var cbbox2 = document.getelementbyid("cbbox2")
var cbbox3 = document.getelementbyid("cbbox3")
function bind(obj,eventstr,callback){
if( obj.addeventlistener ){
// 大部分浏览器兼容的方式
obj.addeventlistener( eventstr,callback,true) // 捕获阶段
}else{
/*
* this是谁由调用方式决定
* callback.call(obj)
*/
obj.attachevent( "on"+eventstr , function(){
//在匿名函数中调用回调函数
callback.call(obj)
})
}
}
bind(cbbox1,"click",function(){
alert("我是cbbox1的响应函数")
})
bind(cbbox2,"click",function(){
alert("我是cbbox2的响应函数")
})
bind(cbbox3,"click",function(){
alert("我是cbbox3的响应函数")
})
</script>
<pre>
118. 拖拽1
- 拖拽的流程
1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
</pre>
<style type="text/css">
#tuozhuai_box {
position: relative;
width: 1000px;
height: 500px;
}
#tzbox1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#tzbox2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<div id="tuozhuai_box">
<div id="tzbox1"></div>
<div id="tzbox2"></div>
</div>
<script type="text/javascript">
console.log("第118");
var tzbox = document.getelementbyid("tuozhuai_box")
var tzbox1 = document.getelementbyid("tzbox1")
tzbox1.onmousedown = function(event){
event = event || window.event
var ol = event.clientx - tzbox1.offsetleft
var ot = event.clienty - tzbox1.offsettop
tzbox.onmousemove = function(event){
event = event || window.event
var left = event.clientx - ol
var top = event.clienty - ot
tzbox1.style.left = left + "px"
tzbox1.style.top = top + "px"
}
tzbox.onmouseup = function(){
tzbox.onmousemove = null
tzbox.onmouseup = null
}
}
</script>
<pre>
119. 拖拽2
</pre>
<style type="text/css">
#tuozhuai_box2 {
position: relative;
width: 1000px;
height: 500px;
}
#tzbox21{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#tzbox22{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<div id="tuozhuai_box2">
<div id="tzbox21"></div>
<div id="tzbox22"></div>
</div>
<script type="text/javascript">
console.log("第119");
var tzbox2 = document.getelementbyid("tuozhuai_box2")
var tzbox21 = document.getelementbyid("tzbox21")
tzbox21.onmousedown = function(event){
//设置tzbox21捕获所有鼠标按下的事件
/*
* setcapture()
* - 只有ie支持，但是在火狐中调用时不会报错，
* 而如果使用chrome调用，会报错
*/
/*if(tzbox21.setcapture){
tzbox21.setcapture();
}*/
tzbox21.setcapture && tzbox21.setcapture();
event = event || window.event
var ol = event.clientx - tzbox21.offsetleft
var ot = event.clienty - tzbox21.offsettop
tzbox2.onmousemove = function(event){
event = event || window.event
var left = event.clientx - ol
var top = event.clienty - ot
tzbox21.style.left = left + "px"
tzbox21.style.top = top + "px"
}
tzbox2.onmouseup = function(){
tzbox2.onmousemove = null
tzbox2.onmouseup = null
tzbox21.releasecapture && tzbox21.releasecapture();
}
/*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
* 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
* 如果不希望发生这个行为，则可以通过return false来取消默认行为
* 但是这招对ie8不起作用
*/
return false
}
</script>
<pre>
120. 拖拽3
完成drag函数
</pre>
<script type="text/javascript">
console.log("第120");
function drag(obj){
obj.onmousedown = function(event){
obj.setcapture && obj.setcapture();
event = event || window.event
var ol = event.clientx - obj.offsetleft
var ot = event.clienty - obj.offsettop
document.onmousemove = function(event){
event = event || window.event
var left = event.clientx - ol
var top = event.clienty - ot
obj.style.left = left + "px"
obj.style.top = top + "px"
}
document.onmouseup = function(){
document.onmousemove = null
document.onmouseup = null
obj.releasecapture && obj.releasecapture();
}
return false
}
}
var tzbox22 = document.getelementbyid("tzbox22")
drag(tzbox22)
</script>
</body>
</html>
所有基础课程链接：
1.javascript基础视频教程总结（001-010章） 2.javascript基础视频教程总结（011-020章） 3. javascript基础视频教程总结（021-030章） 4. javascript基础视频教程总结（031-040章）
5. javascript基础视频教程总结（041-050章） 6. javascript基础视频教程总结（051-060章） 7. javascript基础视频教程总结（061-070章） 8. javascript基础视频教程总结（071-080章）
9. javascript基础视频教程总结（081-090章） 10. javascript基础视频教程总结（091-100章） 11. javascript基础视频教程总结（101-110章） 12. javascript基础视频教程总结（111-120章）
13. javascript基础视频教程总结（121-130章） 14. javascript基础视频教程总结（131-140章）
另外，欢迎关注我的
上一篇： 蜘蛛侠：我有句mmp不知当不当讲