网站怎么防黑客,采购网站官网,重庆seo网站收录优化,小公司自己怎样做网站Web APIs 本篇学习目标#xff1a; 能够使用removeChild()方法删除节点 能够完成动态生成表格案例 能够使用传统方式和监听方式给元素注册事件 能够说出事件流执行的三个阶段 能够在事件处理函数中获取事件对象 能够使用事件对象取消默认行为 能够使用事件对象阻止事件冒泡 能…Web APIs 本篇学习目标 能够使用removeChild()方法删除节点 能够完成动态生成表格案例 能够使用传统方式和监听方式给元素注册事件 能够说出事件流执行的三个阶段 能够在事件处理函数中获取事件对象 能够使用事件对象取消默认行为 能够使用事件对象阻止事件冒泡 能够使用事件对象获取鼠标的位置 能够完成跟随鼠标的天使案例 1.1. 节点操作
1.1.1 删除节点 node.removeChild() 方法从 node节点中删除一个子节点返回删除的节点。 button删除/buttonulli熊大/lili熊二/lili光头强/li/ulscript// 1.获取元素var ul document.querySelector(ul);var btn document.querySelector(button);// 2. 删除元素 node.removeChild(child)// ul.removeChild(ul.children[0]);// 3. 点击按钮依次删除里面的孩子btn.onclick function() {if (ul.children.length 0) {this.disabled true;} else {ul.removeChild(ul.children[0]);}}/script1.1.2 案例删除留言 textarea name id/textareabutton发布/buttonul/ulscript// 1. 获取元素var btn document.querySelector(button);var text document.querySelector(textarea);var ul document.querySelector(ul);// 2. 注册事件btn.onclick function() {if (text.value ) {alert(您没有输入内容);return false;} else {// console.log(text.value);// (1) 创建元素var li document.createElement(li);// 先有li 才能赋值li.innerHTML text.value a hrefjavascript:;删除/a;// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// (3) 删除元素 删除的是当前链接的li 它的父亲var as document.querySelectorAll(a);for (var i 0; i as.length; i) {as[i].onclick function() {// 删除的是 li 当前a所在的li this.parentNode;ul.removeChild(this.parentNode);}}}}/script1.1.3 复制克隆节点 ulli1111/lili2/lili3/li/ulscriptvar ul document.querySelector(ul);// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容var lili ul.children[0].cloneNode(true);ul.appendChild(lili);/script1.1.4 案例动态生成表格 script// 1.先去准备好学生的数据var datas [{name: 魏璎珞,subject: JavaScript,score: 100}, {name: 弘历,subject: JavaScript,score: 98}, {name: 傅恒,subject: JavaScript,score: 99}, {name: 明玉,subject: JavaScript,score: 88}, {name: 大猪蹄子,subject: JavaScript,score: 0}];// 2. 往tbody 里面创建行 有几个人通过数组的长度我们就创建几行var tbody document.querySelector(tbody);// 遍历数组for (var i 0; i datas.length; i) { // 1. 创建 tr行var tr document.createElement(tr);tbody.appendChild(tr);// 2. 行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数 // 使用for in遍历学生对象for (var k in datas[i]) { // 创建单元格 var td document.createElement(td);// 把对象里面的属性值 datas[i][k] 给 td td.innerHTML datas[i][k];tr.appendChild(td);}// 3. 创建有删除2个字的单元格 var td document.createElement(td);td.innerHTML a hrefjavascript:;删除 /a;tr.appendChild(td);}// 4. 删除操作 开始 var as document.querySelectorAll(a);for (var i 0; i as.length; i) {as[i].onclick function() {// 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode)}}/script1.1.5 创建元素的三种方式 script// 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕再调用这句话会导致页面重绘var btn document.querySelector(button);btn.onclick function() {document.write(div123/div);}// 2. innerHTML 创建元素var inner document.querySelector(.inner);for (var i 0; i 100; i) {inner.innerHTML a href#百度/a}var arr [];for (var i 0; i 100; i) {arr.push(a href#百度/a);}inner.innerHTML arr.join();// 3. document.createElement() 创建元素var create document.querySelector(.create);for (var i 0; i 100; i) {var a document.createElement(a);create.appendChild(a);}/script1.1.6 innerTHML和createElement效率对比
innerHTML字符串拼接方式效率低
scriptfunction fn() {var d1 new Date();var str ;for (var i 0; i 1000; i) {document.body.innerHTML div stylewidth:100px; height:2px; border:1px solid blue;/div;}var d2 new Date();console.log(d2 - d1);}fn();
/scriptcreateElement方式效率一般
scriptfunction fn() {var d1 new Date();for (var i 0; i 1000; i) {var div document.createElement(div);div.style.width 100px;div.style.height 2px;div.style.border 1px solid red;document.body.appendChild(div);}var d2 new Date();console.log(d2 - d1);}fn();
/scriptinnerHTML数组方式效率高
scriptfunction fn() {var d1 new Date();var array [];for (var i 0; i 1000; i) {array.push(div stylewidth:100px; height:2px; border:1px solid blue;/div);}document.body.innerHTML array.join();var d2 new Date();console.log(d2 - d1);}fn();
/script1.2. DOM的核心总结 关于dom操作我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
1.2.1. 创建 1.2.2. 增加 1.2.3. 删 1.2.4. 改 1.2.5. 查 1.2.6. 属性操作 1.3. 事件高级
1.3.1. 注册事件2种方式 案例演示
bodydiv classbox/divbutton idbtn事件/buttonscriptvar btndocument.querySelector(#btn)var boxdocument.querySelector(.box)// 采用onclick 方式绑定单击事件btn.onclickfunction(){box.style.width200px}// 只有第2个事件起作用btn.onclickfunction(){box.style.height200px}// 使用 addeventlistener 方式注册事件// btn.addEventListener(click,function(){// box.style.width200px// })// btn.addEventListener(click,function(){// box.style.height200px// })/script1.3.2 事件监听
addEventListener()事件监听IE9以后支持 eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget目标对象上当该对象触发指定的事件时就会执行事件处理函数。 attacheEvent()事件监听IE678支持 eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget目标对象 上当该对象触发指定的事件时指定的回调函数就会被执行。
scriptbtn.attachEvent(onclick,function(){box.style.width200px})btn.attachEvent(onclick,function(){box.style.height200px})
/script事件监听兼容性解决方案
封装一个函数函数中判断浏览器的类型
1.3.3. 删除事件解绑事件 div1/divdiv2/divdiv3/divscriptvar divs document.querySelectorAll(div);divs[0].onclick function() {alert(11);// 1. 传统方式删除事件divs[0].onclick null;}// 2. removeEventListener 删除事件divs[1].addEventListener(click, fn) // 里面的fn 不需要调用加小括号function fn() {alert(22);divs[1].removeEventListener(click, fn);}// 3. detachEventdivs[2].attachEvent(onclick, fn1);function fn1() {alert(33);divs[2].detachEvent(onclick, fn1);}/script**删除事件兼容性解决方案 ** 1.3.4. DOM事件流 html中的标签都是相互嵌套的我们可以将元素想象成一个盒子装一个盒子document是最外面的大盒子。
当你单击一个div时同时你也单击了div的父元素甚至整个页面。那么是先执行父元素的单击事件还是先执行div的单击事件 比如我们给页面中的一个div注册了单击事件当你单击了div时也就单击了body单击了html单击了document。 当时的2大浏览器霸主谁也不服谁
IE 提出从目标元素开始然后一层一层向外接收事件并响应也就是冒泡型事件流。
Netscape网景公司提出从最外层开始然后一层一层向内接收事件并响应也就是捕获型事件流。江湖纷争武林盟主也脑壳疼最终w3c 采用折中的方式平息了战火制定了统一的标准 —--— 先捕获再冒泡。
现代浏览器都遵循了此标准所以当事件发生时会经历3个阶段。
网景虽死精神永存DOM 事件流会经历3个阶段 捕获阶段 当前目标阶段 冒泡阶段
我们向水里面扔一块石头首先它会有一个下降的过程这个过程就可以理解为从最顶层向事件发生的最具体元素目标点的捕获过程之后会产生泡泡会在最低点 最具体元素之后漂浮到水面上这个过程相当于事件冒泡。 事件冒泡 div classfatherdiv classsonson盒子/div/divscript// onclick 和 attachEventie 在冒泡阶段触发// 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 // son - father -body - html - documentvar son document.querySelector(.son);// 给son注册单击事件son.addEventListener(click, function() {alert(son);}, false);// 给father注册单击事件var father document.querySelector(.father);father.addEventListener(click, function() {alert(father);}, false);// 给document注册单击事件省略第3个参数document.addEventListener(click, function() {alert(document);})/script事件捕获 div classfatherdiv classsonson盒子/div/divscript// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发// document - html - body - father - sonvar son document.querySelector(.son);// 给son注册单击事件第3个参数为trueson.addEventListener(click, function() {alert(son);}, true);var father document.querySelector(.father);// 给father注册单击事件第3个参数为truefather.addEventListener(click, function() {alert(father);}, true);// 给document注册单击事件第3个参数为truedocument.addEventListener(click, function() {alert(document);}, true)/script1.3.5. 事件对象
什么是事件对象
事件发生后跟事件相关的一系列信息数据的集合都放到这个对象里面这个对象就是事件对象。
比如 谁绑定了这个事件。 鼠标触发事件的话会得到鼠标的相关信息如鼠标位置。 键盘触发事件的话会得到键盘的相关信息如按了哪个键。
事件对象的使用
事件触发发生时就会产生事件对象并且系统会以实参的形式传给事件处理函数。
所以在事件处理函数中声明1个形参用来接收事件对象。 事件对象的兼容性处理
事件对象本身的获取存在兼容问题 标准浏览器中是浏览器给方法传递的参数只需要定义形参 e 就可以获取到。 在 IE6~8 中浏览器不会给方法传递参数如果需要的话需要到 window.event 中获取查找。 只要“||”前面为false, 不管“||”后面是true 还是 false都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false都返回 “||” 前面的值。div123/divscriptvar div document.querySelector(div);// 为了简单这里使用 onclick 方式注册事件如果使用addeventLisenter 还要考虑兼容性写法div.onclick function(e) {// 事件对象e e || window.event;console.log(e);}/script事件对象的属性和方法 代码示例
btn.onclickfunction(e){ee || window.event console.log(e.target || e.srcElement.outerHTML)
}
e.target 和 this 的区别 this 是事件绑定的元素绑定这个事件处理函数的元素 。 e.target 是事件触发的元素。 常情况下terget 和 this是一致的
但有一种情况不同那就是在事件冒泡时父子元素有相同事件单击子元素父元素的事件处理函数也会被触发执行这时候this指向的是父元素因为它是绑定事件的元素对象而target指向的是子元素因为他是触发事件的那个具体元素对象。div123/divscriptvar div document.querySelector(div);div.addEventListener(click, function(e) {// e.target 和 this指向的都是divconsole.log(e.target);console.log(this);});/script事件冒泡下的e.target和this ulliabc/liliabc/liliabc/li/ulscriptvar ul document.querySelector(ul);ul.addEventListener(click, function(e) {// 我们给ul 绑定了事件 那么this 就指向ul console.log(this); // ul// e.target 触发了事件的对象 我们点击的是li e.target 指向的就是liconsole.log(e.target); // li});/script1.3.6 阻止默认行为 html中一些标签有默认行为例如a标签被单击后默认会进行页面跳转。 a hrefhttp://www.baidu.com百度/ascript// 2. 阻止默认行为 让链接不跳转 var a document.querySelector(a);a.addEventListener(click, function(e) {e.preventDefault(); // dom 标准写法});// 3. 传统的注册方式document.querySelector(a).onclickfunction(e){ee||window.eventif(e.preventDefault){e.preventDefault()} e.returnValuefalse// 或者上面两种方式都不使用直接使用下面代码也可以,没有兼容问题// 说说这种方法有什么问题// return false}/script1.3.7 阻止事件冒泡
事件冒泡本身的特性会带来坏处也会带来好处。 div classfatherdiv classsonson儿子/div/divscriptvar son document.querySelector(.son);// 给son注册单击事件son.addEventListener(click, function(e) {alert(son);e.stopPropagation(); // stop 停止 Propagation 传播window.event.cancelBubble true; // 非标准 cancel 取消 bubble 泡泡}, false);var father document.querySelector(.father);// 给father注册单击事件father.addEventListener(click, function() {alert(father);}, false);// 给document注册单击事件document.addEventListener(click, function() {alert(document);})/script阻止事件冒泡的兼容性处理 1.3.8 事件委托
什么是事件委托
把事情委托给别人代为处理。事件委托也称为事件代理在 jQuery 里面称为事件委派。 说白了就是不给子元素注册事件给父元素注册事件把处理代码在父元素的事件中执行。 举例说明
快递员手里有100个快递小区中有100个居民挨个派送到家太麻烦了速度也慢居民等的也着急
处理方式将100个快递放到菜鸟驿站100个居民去菜鸟驿站取货快递省事速度也快居民也不用等待
本来送快递是快递员自己的事结果把这个事情委派给了菜鸟驿站这就是事件委派
js事件中的代理 事件委托的原理
给父元素注册事件利用事件冒泡当子元素的事件触发会冒泡到父元素然后去控制相应的子元素。
事件委托的作用 我们只操作了一次 DOM 提高了程序的性能。 动态新创建的子元素也拥有事件。 ulli1/lili2/lili3/lili4/lili5/lili6/lili7/lili8/li/ulscript// 事件委托的核心原理给父节点添加侦听器 利用事件冒泡影响每一个子节点var ul document.querySelector(ul);ul.addEventListener(click, function(e) {// e.target 这个可以得到我们点击的对象e.target.style.color blue;})/script1.4. 常用鼠标事件 1.4.1 案例禁止选中文字和禁止右键菜单 body我是一段不愿意分享的文字script// 1. contextmenu 我们可以禁用右键菜单document.addEventListener(contextmenu, function(e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener(selectstart, function(e) {e.preventDefault();})/script
/body1.4.2 鼠标事件对象 1.4.3 获取鼠标在页面的坐标 script// 鼠标事件对象 MouseEventdocument.addEventListener(click, function(e) {// 1. client 鼠标在可视区的x和y坐标console.log(e.clientX);console.log(e.clientY);console.log(---------------------);// 2. page 鼠标在页面文档的x和y坐标console.log(e.pageX);console.log(e.pageY);console.log(---------------------);// 3. screen 鼠标在电脑屏幕的x和y坐标console.log(e.screenX);console.log(e.screenY);})/script1.4.4 案例和魔鬼赛跑 img srcimages/devil.gif altscriptvar img document.querySelector(img);document.addEventListener(mousemove, function(e) {// 1. mousemove只要我们鼠标移动1px 就会触发这个事件// 2.核心原理 每次鼠标移动我们都会获得最新的鼠标坐标 // 把这个x和y坐标做为图片的top和left 值就可以移动图片var x e.pageXvar y e.pageYimg.style.left x-img.width pximg.style.top y-img.height/2 px});/script
