申请域名后 怎么把网站部署上去企业网络营销策划与分析

申请域名后 怎么把网站部署上去,企业网络营销策划与分析,北京快三公交车,寮步镇网站建设注册事件的两种方式on事件名称onclick、onmouseover这种on事件名称的方式注册事件几乎所有的浏览器都支持。注册事件#xff1a;box.onclick function(){//事件处理程序 }移除事件#xff1a;box.onclick null; on事件名称注册事件的缺点#xff1a;同一个元素同一类型…注册事件的两种方式on事件名称onclick、onmouseover这种on事件名称的方式注册事件几乎所有的浏览器都支持。注册事件box.onclick function(){ //事件处理程序 }移除事件box.onclick null;on事件名称注册事件的缺点同一个元素同一类型的事件只能注册一个如果注册了多个会出现覆盖问题。注册事件的新方式addEventListener与removeEventListener现代浏览器支持的注册事件的新方式这种方式注册的事件不会出现覆盖问题。addEventListener的语法//第一个参数事件的类型click mouseover //第二个参数函数监听者每次点击这个函数就执行。 //第三个参数是否使用捕获默认为false表示冒泡 addEventListener(type, func, useCapture);tips如果想要让你注册的事件能够移除不能使用匿名函数。function fn1() { alert(hehe); } //如果想让注册的事件能移除不能用匿名函数。 box.addEventListener(click, fn1, false);removeEventListen的语法//第一个参数参数类型 //第二个参数要移除的那个函数 //第三个参数false removeEventListener(type, func, useCapture);attachEvent与detachEvent了解IE678不支持addEventListener与removeEventListen两个方法但是支持attachEvent与detachEvnetattachEvent的用法//type:事件类型 需要加上on onclick onmouseenter //func:需要执行的那个事件 attachEvent(type, func)detachEvent的用法//type:事件类型 需要加上on onclick onmouseenter //func:需要执行的那个事件 detachEvent(type, func)!DOCTYPE html html langen head meta charsetUTF-8 titleDocument/title /head body script // 注册事件 on事件名 function(){} // 问题 给同一个元素注册同一个事件多次后面的会覆盖前面 /*document.onclick function () { console.log(1); } document.onclick function () { console.log(2); }*/ // addEventListener(); // 添加事件监听 说白了就是在注册事件 // addEventListener(type, fn, useCapture); // type: 事件名 事件名不带on click mouseover // fn 事件处理函数 // useCapture: 暂时不用管省略不写。 // addEventListener 在注册事件的时候是不存在覆盖问题。 document.addEventListener(click, function(){ console.log(3); }) document.addEventListener(click, function(){ console.log(4); }) // 注册事件的两种方式 // 1. on事件名 function(){} 存在 同一个元素注册同一个事件多次后面的覆盖前面的 // 2. addEventListener来注册 不存在覆盖问题 IE678不兼容 // addEventListener(事件名, 事件处理函数) /script /body /html!DOCTYPE html html langen head meta charsetUTF-8 titleDocument/title /head body script // 解绑事件: 注册的事件不需要了 // 1. on注册的事件 // 语法 on事件名 null; // 需求点击document打印1只会打印一次 /*document.onclick function () { console.log(1); // 点击了就会解绑该事件 document.onclick null; }*/ // 2. addEventListener注册的事件该如何解绑 // addEventListener 注册的事件需要使用对应removeEventListener方法来解绑 // 注意以下使用addEventListener注册事件的写法是没有办法解绑因为事件处理函数是个匿名函数 // document.addEventListener(click, function () { // console.log(123); // }) // 以下使用addEventListener注册事件的写法是可以来解绑 // 做法 把匿名函数放到外面给其一个函数名即可。 var fn function () { console.log(123456); document.removeEventListener(click, fn); }; document.addEventListener(click, fn); // removeEventListener 语法 // removeEventListener(type, fn, useCapture) // type 解绑事件名 // fn 事件处理函数 不能是匿名函数否则无法解绑 // useCapture 忽略不管 // 没有解绑 /*document.removeEventListener(click, function () { console.log(123); });*/ // addEventListener 注册的事件on这种方式无法解绑 // document.onclick null; // addEventListener 注册的事件不存在覆盖问题 // document.addEventListener(click, null); // 小结 // 解绑事件也有两种方式 // 1. on注册的事件该如何解绑 on事件名 null; // 2. addEventListener 注册的事件该如何解绑 // 需要removeEventListener来解绑不能是匿名函数否则无法解绑的。 // 为了可以解绑事件 把匿名函数放到外面加上函数名 /script /body /html!DOCTYPE html html langen head meta charsetUTF-8 titleDocument/title /head body script // IE678中 // attachEvent(eventType, function) 注册事件 // detachEvent(eventType, function) 解绑事件 // eventType 事件名 要带on var fn function () { console.log(123); } document.attachEvent(onclick, fn); document.detachEvent(onclick, fn); /script /body /html事件对象事件对象的概述在触发某个事件的时候都会产生一个事件对象Event这个对象中包含所有与事件相关的一些信息包括触发事件的元素事件的类型以及其他与事件相关的信息。鼠标事件触发时事件对象中会包含鼠标的位置信息。键盘事件触发时事件对象中会包含按下的键相关的信息。每一个事件在触发时都会产生一个事件对象。 你见或者不见我就在那里不悲不喜。 你爱或者不爱爱就在那里不增不减。 你用或者不用我都会给你不离不弃。获取事件对象既然事件对象中存储了这么多的信息我们首先需要做的就是获取到这个事件对象。获取事件对象非常的简单只需要在注册事件的时候指定一个形参即可。这个形参就是我们想要获取到的事件对象。btn.onclick function(event){ //event就是事件对象里面包含了事件触发时的一些信息。 console.log(event); }事件对象的常用属性事件对象中有很多很多的属性但是很多属性并不常用。我们经常用到的是鼠标位置信息和键盘码相关的信息。记录了鼠标位置信息的相关属性screenX与screenY光标相对于屏幕左上角的水平位置与垂直位置。 clientX与clientY光标相对于可视区左上角的水平位置和垂直位置。 pageX与pageY光标相对于网页文档document左上角的水平位置与垂直位置推荐使用【案例:让小天使飞.html】!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleTitle/title style body{ /*height: 4000px;*/ } /style /head body img srcimages/tianshi.gif alt script // 需求当鼠标在页面中移动的时候让图片跟随鼠标移动 // 把鼠标的位置获取到设置给图片鼠标的位置作为图片的left、top // onmousemove 当鼠标移动的时候触发 /*document.onmousemove function () { console.log(动了); }*/ var ts document.querySelector(img); document.onmousemove function (e) { // 元素的left、top样式要起效果元素必须要有定位 ts.style.position absolute; // // 把鼠标到可视区的位置获取到设置给了图片 // ts.style.left e.clientX px; // ts.style.top e.clientY px; // 把鼠标到页面的位置获取到设置给了图片 // 当没有滚动条的时候使用pageX和clientX是一样效果 // 当有滚动条 的时候需要使用pageX Y // 综合来看推荐使用pageX pageY ts.style.left e.pageX px; ts.style.top e.pageY px; } /script /body /htmltianshi.gif如下图记录了键盘码的属性获取键盘码: 在键盘事件中通过e.keyCode可以获取到按下的键盘码【微博评论-添加回车发送功能】!DOCTYPE html html head langen meta charsetUTF-8 title/title style * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 660px; margin: 100px auto; border: 1px solid #000; padding: 20px; } textarea { width: 450px; height: 160px; outline: none; resize: none; } ul { width: 450px; padding-left: 80px; } ul li { line-height: 25px; border-bottom: 1px dashed #cccccc; } input { float: right; } /style /head body div classbox idweibo span微博发布/span textarea name idtxt cols30 rows10/textarea button idbtn发布/button ul idul/ul /div script // 思路 // 1. 找对象txt、btn、ul // 2. btn注册click // 3. 创建li元素添加到ul中(insertBefore 添加到第一位之前) // 4. 给li设置内容内容来源于txt的内容 // 5. 创建一个button // 6. 设置button的内容 button删除/button innerText // 7. 给删除按钮注册click // 8. 点击的时候删除当前对应的li元素 removeChild // 9. 把按钮添加到li中 // 细节处理 // 1. 如果txt没有输入内容点击按钮阻止创建li添加到ul中 // 1. var txt document.querySelector(#txt); var btn document.querySelector(#btn); var ul document.querySelector(#ul); // 2. btn.onclick function () { // text变量存储txt的内容 // trim() 去除字符串两端的空白 var text txt.value.trim(); // 在获取到内容之后就可以清空文本域了 txt.value ; // 判断txt是否有输入内容 if (text.length 0) { // 啥都没写底下代码不执行 return; } // 3. var newLi document.createElement(li); ul.insertBefore(newLi, ul.firstElementChild); // 4. newLi.innerText text; // 5. var delBtn document.createElement(button); // 6. delBtn.innerText 删除; // 设置按钮的样式右浮动 delBtn.style.float right; // 7. delBtn.onclick function () { // 8. // parent.removeChild(child); // child this.parentNode; // parent ul ul.removeChild(this.parentNode); } // 9 newLi.appendChild(delBtn); } // 添加回车发布功能 // 给txt注册键盘事件 txt.onkeyup function (e) { // 需要知道摁了什么键 if(e.keyCode 13){ // 回车 发布 就像点击了发布按钮一样 btn.onclick(); // 把btn的点击事件给调用了。 } } /script /body /htmloffset系列offsetHeight与offsetWidthoffsetHeight与offsetWidth1. 获取的是元素真实的高度和宽度 2. 获取到的是数值类型方便计算 3. offsetHeight与offsetWidth是只读属性不能设置。获取宽度和高度offsetWidth与offsetHeightoffsetParentparentNode和offsetParent1. parentNode始终是父元素 2. offsetParent是离当前元素最近的定位元素(absolute、relative)如果没有那就找bodyoffsetLeft与offsetTopoffsetLeft: 自身左侧到offsetParent左侧的距离offsetTop:自身顶部到offsetParent顶部的距离1. 元素自身与offsetParent真实的距离 2. 获取到的是数值类型方便计算 3. 只读属性只能获取不能设置拖拽特效【可拖拽的盒子.html】!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / meta http-equivX-UA-Compatible contentieedge / titleDocument/title style div { width: 200px; height: 200px; background-color: #f99; cursor: move; position: absolute; top: 100px; left: 100px; } /style /head body div/div script // 拖拽过程 // 1. 鼠标在div上摁住不松手 // 2. 鼠标在页面中移动div跟随鼠标移动 // 3. 鼠标在页面中松手了div就不会跟随鼠标移动了 // onmousedown 当鼠标摁住的时候触发 // onmouseup 当鼠标抬起的时候触发 // onmousemove 当鼠标移动的时候触发 var box document.querySelector(div); // 解决bug的思路 // 当鼠标在div上摁下去的获取xy鼠标到div内的距离 // x 鼠标摁下去的鼠标到页面的距离 - div到页面的距离 // div到页面的距离 offsetLeft offsetTop // 1. box.onmousedown function(e) { console.log(摁下去了); var x e.pageX - box.offsetLeft; var y e.pageY - box.offsetTop; // console.log(x, y); // 2. 把onmousemove放到 onmousedown里面 // 表示只有摁下去了才可以移动 document.onmousemove function(e) { console.log(div跟随鼠标动了); // 真的是需要让divdiv跟随鼠标移动left、top 把鼠标的位置获取到设置给div的left、top box.style.left e.pageX - x px; box.style.top e.pageY - y px; } } // 3. document.onmouseup function() { console.log(松手了); // 当松手了需要把onmousemove解绑掉 document.onmousemove null; } // 小结 // 1. 鼠标在div上摁下去 onmousedown // 2. 鼠标在页面中移动 onmousemove // 注意点必须是摁住的时候才可以移动 // 需要把onmousemove的代码放到onmousedown事件里面 // // 把鼠标的位置获取到设置给div的left。top。 // // 3. 鼠标在页面上松手 onmouseup // 注意点鼠标抬起了onmousemove事件就不要了就需要解绑 // document.onmousemove null; /script /body /html放大镜效果案例放大镜在开发中是一个很常见的特效但是所有的放大镜的实现效果都是一样。【案例-07-放大镜特效】实现思路1. 给box注册onmouseover事件让big和mask显示 2. 给box注册onmouseout事件让big和mask隐藏 3. 给box注册onmousemove事件获取鼠标在box中的位置让mask跟着移动 4. 限定mask的移动范围 5. 根据比例让bigImg跟着移动!DOCTYPE html html head langen meta charsetUTF-8 title/title style * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; cursor: move; display: none; } .small { position: relative; } .box img { vertical-align: top; } #bigBox img { position: absolute; } /style /head body div classbox idbox div idsmallBox classsmall img srcimages/001.jpg width350 alt/ div idmask classmask/div /div div idbigBox classbig img srcimages/0001.jpg width800 alt/ /div /div script //1. 给smallbox注册onmouseover事件, 显示mask和bigBox //2. 给smallbox注册onmouseout事件 隐藏mask和bigBox //3. 给smallbox注册onmousemove事件让mask和bigImg跟着动 var box document.getElementById(box); var smallBox document.getElementById(smallBox); var mask document.getElementById(mask); var bigBox document.getElementById(bigBox); var bigImg document.querySelector(.big img); smallBox.onmouseover function () { mask.style.display block; bigBox.style.display block; } smallBox.onmouseout function () { mask.style.display none; bigBox.style.display none; } //给smallbox注册移动事件 只要smallbox中移动才会触发 smallBox.onmousemove function (e) { //1. 移动mask //1.1 获取鼠标在smallbox中的位置z var spaceX e.clientX - box.offsetLeft; var spaceY e.clientY - box.offsetTop; //给mask设置 var x spaceX - mask.offsetWidth/2; var y spaceY - mask.offsetHeight/2; console.log(x, y); //限制x和y的取值 if(x 0) { x 0; } if(y 0) { y 0; } if(x smallBox.offsetWidth - mask.offsetWidth) { x smallBox.offsetWidth - mask.offsetWidth; } if(y smallBox.offsetHeight - mask.offsetHeight) { y smallBox.offsetHeight - mask.offsetHeight; } mask.style.left x px; mask.style.top y px; //2. 移动bigImg //我10分钟能吃10个小笼包 东芹10分钟能吃100个小笼包 // 我吃完第5个的时候 东芹要吃完多少个 // 我现在吃的包子数/我能吃的总包子数 东芹吃的包子数/东芹能吃的总得包子数 // mask当前移动的值 / mask能移动的总值 大图片当前移动的值 / 大图片能移动的总值。 bigImg.style.left - x / (smallBox.offsetWidth - mask.offsetWidth) * (bigImg.offsetWidth - bigBox.offsetWidth) px; bigImg.style.top - y / (smallBox.offsetHeight - mask.offsetHeight) * (bigImg.offsetHeight - bigBox.offsetHeight) px; } /script /body /html001.jpg如下图0001.jpg如下图事件流事件冒泡当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。说白了就是当我们触发了子元素的某个事件后父元素对应的事件也会触发。事件捕获了解事件捕获是火狐浏览器提出来的IE678不支持事件捕获基本上我们都是用事件冒泡 事件的处理将从DOM层次的根开始而不是从触发事件的目标元素开始事件被从目标元素的所有祖先元素依次往下传递//当addEventListener第三个参数为true时表示事件捕获 arr[i].addEventListener(click, function () { console.log(this); },true);事件的三个阶段事件的捕获阶段事件的目标阶段触发自己的事件事件的冒泡阶段事件有三个阶段首先发生的是捕获阶段然后是目标阶段最后才是冒泡阶段让addEventLinstener第三个参数为true时表示该事件在捕获阶段发生如果第三个参数为false表示该事件在冒泡阶段发生。阻止事件冒泡通过e.stopPropagation()方法可以阻止事件冒泡【案例登录框】!DOCTYPE html html head langen meta charsetUTF-8 title/title style .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a { padding: 0px; margin: 0px; } .login { width: 512px; height: 280px; position: absolute; left: 0; right: 0; border: #ebebeb solid 1px; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; display: none; } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; /* 火狐 */ /* -moz-user-select: none; */ /*webkit浏览器*/ /* -webkit-user-select: none; */ /*IE10*/ /* -ms-user-select: none; */ /*早期浏览器*/ /* -khtml-user-select: none; */ /* user-select: none; */ } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: #000000; filter: alpha(opacity30); opacity: 0.3; display: none; } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; z-index: 99; cursor: pointer; } /style /head body div classlogin-headera idlink hrefjavascript:void(0);点击弹出登录框/a/div div idlogin classlogin div idtitle classlogin-title登录会员 span idcloseBtn关闭/span/div div classlogin-input-content div classlogin-input label用户名/label input typetext placeholder请输入用户名 nameinfo[username] idusername classlist-input /div div classlogin-input label登录密码/label input typepassword placeholder请输入登录密码 nameinfo[password] idpassword classlist-input /div /div div idloginBtn classlogin-buttona hrefjavascript:void(0); idlogin-button-submit登录会员/a/div /div script // 功能 // 1. 点击link显示login // 2. 点击closeBtn 隐藏login // 3. 点击document 隐藏login var link document.querySelector(#link); var closeBtn document.querySelector(#closeBtn); var login document.querySelector(#login); // 功能1 link.onclick function (e) { login.style.display block; console.log(show); // 在点击link的时候来阻止事件冒泡 e.stopPropagation(); } // 功能2 closeBtn.onclick function () { login.style.display none; } // 功能3 document.onclick function () { login.style.display none; console.log(hide); } login.onclick function (e) { // 目的是为了点击login的时候阻止事件冒泡到document上 e.stopPropagation(); } /script /body /html事件补充阻止浏览器默认行为阻止浏览器默认行为除了使用 return false。还可以通过 e.preventDefault() 可以阻止浏览器的默认行为!DOCTYPE html html langen head meta charsetUTF-8 titleDocument/title /head body a hrefhttp://www.baidu.com百度一下/a script // 浏览器的默认行为 // 1. a链接的点击跳转行为 // 2. 表单的提交按钮 // 3. 浏览器图片默认可以拖拽 // 阻止浏览器的默认行为 事件对象e.preventDefault(); // 阻止a链接的点击跳转行为 // 1. href javascript:void(0); // 2. return false // 3. e.preventDefault(); // 第一种做法只能用于阻止a链接跳转 // 后面两种做法可以用于浏览器的其他默认行为。 // return false 对于使用addEventListener注册的事件是没有办法是不能来阻止默认行为的。 var link document.querySelector(a); link.addEventListener(click, function (e) { console.log(1111); // e.preventDefault(); return false; }) /*var link document.querySelector(a); link.onclick function (e) { e.preventDefault(); console.log(123); }*/ /script /body /html常见的事件常见的鼠标事件onmousedown:鼠标按下事件onmouseup:鼠标弹起事件onclick:单击事件ondblclick双击事件onmouseover鼠标经过事件onmouseout鼠标离开事件onmousemove鼠标移动事件onfocus鼠标获得焦点事件onblur鼠标失去焦点事件常见的键盘事件onkeydown:键盘按下时触发onkeyup:键盘弹起时触发对于鼠标事件事件对象中有一系列的XY记录了鼠标的位置信息。键盘事件中事件对象有一个event.keyCode属性记录了按下去的键的键盘码