- <!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>
JavaScript基础视频教程总结(111-120章)
最新推荐文章于 2022-08-25 16:30:14 发布