webapi-03
1.删除节点
<button>删除</button>
<ul><li>熊大</li><li>熊二</li><li>光头强</li>
</ul>
<script>// // 1.获取元素// var ul = document.querySelector('ul');// ul.removeChild(ul.children[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]);// // }// // }var ul = document.querySelector('ul')var btn = document.querySelector('button')btn.onclick = function () {ul.removeChild(ul.children[ul.children.length - 1])if (ul.children.length === 0) {this.disabled = true}}
2.删除留言案例
?
?
<button>发布</button>
<ul><!-- 代码量 -->
</ul>
<script>// 1.获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2.注册事件 事件执行btn.onclick = function () {if (text.value.trim() === '') {text.value = ''return alert('请输入内容')} var li = document.createElement('li')li.innerHTML = text.value + '<a href="javascript:;">删除</a>'ul.insertBefore(li, ul.children[ul.children[0]])// 获取创建的a var as = li.querySelector('a')// 给a绑定事件as.onclick = function () {ul.removeChild(this.parentNode)}text.value = ''
} 3.克隆元素 ele.cloneNode(true) true 深拷贝 false 默认值 浅拷贝
''<ul> <li>1111</li> <li>2</li> <li>3</li> </ul>
<ol></ol>
<script>// 1.获取元素var ul = document.querySelector('ul')var ol = document.querySelector('ol')// 2.克隆并追加元素var liClone = ul.children[0].cloneNode(true)ol.appendChild(liClone)
4.动态添加表格数据
?
?
</tbody>
</table>
<script>// 1.先去准备好学生的数据// 假数据，伪数据， json 数据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}];// 1.获取元素var tbody=document.querySelector('tbody')// 2.动态添加数据for(var i=0;i<datas.length;i++){// 创建trvar tr=document.createElement('tr')// tr 添加到tbodytbody.appendChild(tr)// 创建td 添加数据for (var k in datas[i]){var td=document.createElement('td')td.innerHTML=datas[i][k]tr.appendChild(td)}// 添加 删除var del=document.createElement('td')del.innerHTML='<a href="javascript:;">删除</a>'tr.appendChild(del)var as=del.children[0]as.οnclick=function(){tbody.removeChild(this.parentNode.parentNode)}}
5.三种创建元素方式区别
// 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘 // var btn = document.querySelector('button'); // btn.onclick = function() { // document.write('<div>123</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);}
innerHTML和createElement在创建一个元素时基本没有区别，创建多个元素时字符串批量拼接后调用innerHTML一次效率最高
6.注册事件的两种方式
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function () {
alert('hi');
}
btns[0].onclick = function () {
alert('hao a u');
}
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function () {
alert(22);
})
btns[1].addEventListener('click', function () {
alert(33);
})
// 3. attachEvent ie9以前的版本支持
// btns[2].attachEvent('onclick', function() {
// alert(11);
// })
// btns[1].attachEvent('onclick', function(){})
7.删除事件
‘<div>1</div>
<div>2</div>
<div>3</div>
<script>// var 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. detachEvent// divs[2].attachEvent('onclick', fn1);
?// function fn1() {// alert(33);// divs[2].detachEvent('onclick', fn1);// }
8.dom事件流三个阶段
’<div class="father"> <div class="son">son盒子</div> ? </div>
<script>var div = document.querySelector('.father')function addEvent(obj, type, fn) {for (var i = 0; i < fn.length; i++) {obj.addEventListener(type,fn[i])}
?}addEvent(div, 'onclick', [alert(1), alert(2)])
?// dom 事件流 三个阶段// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。// 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son// var son = document.querySelector('.son');// son.addEventListener('click', function () {// alert('son');// }, true);// var father = document.querySelector('.father');// father.addEventListener('click', function () {// alert('father');// }, true);
?// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document// var son = document.querySelector('.son');// son.addEventListener('click', function() {// alert('son');// }, false);// var father = document.querySelector('.father');// father.addEventListener('click', function() {// alert('father');// }, false);// document.addEventListener('click', function() {// alert('document');// })
9.事件对象
‘<div>123</div>
<script>// 事件对象var div = document.querySelector('div');div.onclick = function (e) {// console.log(e);// console.log(window.event);// e = e || window.event;console.log(e);}// div.addEventListener('click', function(e) {// console.log(e);
?// })// 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看// 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数// 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键// 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e// 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法 e = e || window.event;// 常见事件对象的属性和方法e.target// 1. e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）// 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
</script>
（1）事件对象阻止默认行为 。e.preventDefault()
''<div>123</div>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com"><input type="submit" value="提交" name="sub">
</form>
<script>// 常见事件对象的属性和方法// 1. 返回事件类型var div = document.querySelector('div');div.addEventListener('click', fn);div.addEventListener('mouseover', fn);div.addEventListener('mouseout', fn);
?function fn(e) {console.log(e.type); // 返回的是事件类型
?}// 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交var a = document.querySelector('a');a.addEventListener('click', function(e) {e.preventDefault(); // dom 标准写法})// 3. 传统的注册方式a.onclick = function(e) {// 普通浏览器 e.preventDefault(); 方法// e.preventDefault();// 低版本浏览器 ie678 returnValue 属性// e.returnValue;// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式return false;alert(11);}addEventListener一般用e.preventDefault()传统用return false
（2）阻止事件冒泡
e.stopPropagation()
（3）事件委托
?
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
- 知否知否，点我应有弹框在手！
?
<script>/*事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件*/
?// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点var ul = document.querySelector('ul');
?ul.addEventListener('click', function(e) {console.log(e)// alert('知否知否，点我应有弹框在手！');// e.target 这个可以得到我们点击的对象e.target.style.backgroundColor = 'pink';
?})
10.常见鼠标事件对象
1.<script> // 鼠标事件对象 MouseEvent document.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);
?})
</script>