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++){
// 创建tr
var tr=document.createElement('tr')
// tr 添加到tbody
tbody.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>
6753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
