一. 表格的一些操作
- rowIndex 获取行id
var index = 行.rowIndex; // 获取行id
- deleteRow() 删除行
格式: 表格.deleteRow(行id)
- insertRow() 插入行
格式: 表格.insertRow()
var tr = oTbody.insertRow();
- insertCell() 插入单元格
格式: 行.insertCell()
var td = tr.insertCell();
二. this的指向问题(重要)
- 普通函数里的this, 默认指向window
- 延时器和定时器里的this, 默认指向window
- 事件函数中的this, 指向事件绑定者
- 箭头函数里面的this, 指向外面的this(默认), 根据环境决定
- 对象里的this, 指向该对象
- 类里面的this, 指向当前类的实例对象
- 使用bind(), call(), apply()可以改变this的指向
三. 事件
1. 事件模式
- 触发 -> 响应
1.1 内联模式
<button onclick="alert('123')">点击</button>
<button onclick="del(this)">点击</button>
<script>
function del(o) {
console.log(o);
}
</script>
1.2 脚本模式
- 一种类型的事件, 同个元素只能绑定一次
- 格式: 元素.onclick = function(){}
var oBtn = document.querySelector('#btn');
oBtn.onclick = function() {
console.log('脚本模式111');
};
2. 事件中的this
- 事件函数中的this, 指向当前事件的绑定者
var oBtn = document.querySelector('#btn');
oBtn.onclick = function() {
console.log(this.nodeName); // 这里的this表示box对象
};
// eg. 使用for循环添加事件, 并判断this
var oIpt= document.querySelectorAll('input');
for (var i = 0; i < oIpt.length; i++) {
oIpt[i].onclick = function() {
console.log(this.value) // 这里的this表示, 当前被点击的那个input元素
}
}
3. 事件分类
3.1 鼠标事件
- onclick 单击
- ondblclick 双击
- onmousedown 按下
- onmouseup 抬起
- onmouseover 进入 (会触发子元素)
- onmouseout 离开 (会触发子元素)
- onmouseenter 进入 (不会触发子元素)
- onmouseleave 离开 (不会触发子元素)
- onmousemove 移动
- onmousewheel 滚动
3.2 键盘事件
- onkeyup 抬起
- onkeydown 按下 (按住不放, 会重复触发)
- onkeypress 字符键 (按住不放, 会重复触发)
字符键: a~z, A~Z, 0~9, 空格, 回车, esc等
功能键: alt, shift等
window.onkeypress = function(e) {}
3.3 html事件
- addEventListener("DOMContentLoaded", function(){}) dom树加载完之后, 就立即执行触发这个事件 [相对快]
- onload dom树和外部资源都加载完之后, 才会执行 , 凡是带src属性的标签, 都有onload事件 [相对慢]
- oncontentmenu 右击菜单
- onunload 关闭窗口, 刷新后, 才会触发
- onresize 页面尺寸
- onwheel 页面鼠标滚动
- onscroll 页面滚动
- 扩展: onscroll 获取不可见区域的兼容写法
- 如何查看是否有声明头 (标准的文档) document.compatMode
CSS1Compat 有
BackCompat 没有
- 获取不可见高度
document.documentElement.scrollTop [标准声明头]
document.body.scrollTop [用这个方法需要去掉声明头]
window.pageYOffset [ie9以上可以用]
// * 获取不可见区域的兼容写法 [重点]
function getScroll() {
if (window.pageYOffset != null) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
if (document.compatMode == 'CSS1Compat') {
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
3.4 表单事件
- oninput 输入事件
可以搭配防抖- onchange 改变输入的内容
输入(改变)内容后,失去焦点,才触发- onselect 选中事件
选中内容, 并且鼠标松开, 才触发- onblur 失去焦点
失去焦点, 就触发- onfocus 聚焦
聚焦就触发- onsubmit 提交事件
提交表单的内容, 就触发- 补充: 表单中的 this.phone.value
this表示当前表单
phone表示表单中某个元素的name对应的值
<!-- 补充: 表单中的 **this.phone.value** -->
<form action="">
<input type="text" id="txt" name="phone">
<button>提交</button>
<button type="reset">重置</button>
</form>
<script>
var form = document.forms[0]; // 获取页面中的第一个表单
form.onsubmit = function() {
console.log('onsubmit');
var val = this.phone.value; //直接获取当前表单的参数
if (val.length == 11) {
return true;
}
return false; // 阻止表单默认行为
}
</script>
