事件绑定方式
- DOM0级
-
绑定
- 元素.on事件类型 = 事件函数
- 只能够绑定一个事件 因为它是对属性进行赋值
-
移除
- 元素.on事件类型 = null
-
我们都知道，一个对象的属性只能够保存一个值。 如果对一个对象属性进行多次赋值，后面赋值的属性会替换掉前面的属性
-
DOM2级
-
绑定
- dom.addEventListener(type, handler, boolean)
- type: 事件类型字符串 不带on
- handler: 事件处理函数
- boolean: 布尔值 决定绑定到捕获阶段还是冒泡阶段 默认是false false表示冒泡
- dom.addEventListener(type, handler, boolean)
-
结论： 可以通过addEventListener方法进行多个事件函数的绑定 执行时是按照代码的书写顺序执行 因为代码的书写顺序决定了绑定顺序
-
移除
- document.removeEventListener(type, handler, boolean);
- type: 事件类型字符串 不带on
- handler: 事件处理函数 一定要保证函数地址是绑定的那个
- boolean: 布尔值 决定移除的是捕获阶段还是冒泡阶段 默认是false false表示冒泡
- document.removeEventListener(type, handler, boolean);
-
结论： 第二个参数是要移除的函数 函数是引用类型 引用类型的比较的是地址 所以一定要保证 移除的函数是当初绑定的那个函数本身
-
-
IE中的高级绑定方式(非DOM2级)
IE中没有实现DOM2级
- 绑定方式：
- dom.attachEvent(type, handler);
- type: 事件类型字符串 带on
- handler: 事件处理函数
- 没有第三个参数 意味着不能够绑定到捕获阶段
特点: 可以对同一个元素绑定多个同类型事件的处理函数 执行起来是倒着执行 先绑定的后执行 后绑定的先执行
- dom.attachEvent(type, handler);
- 移除方式：
- dom.detachEvent(type, handler);
- type: 事件类型字符串 带on
- handler: 事件处理函数 要注意函数的地址问题
- dom.detachEvent(type, handler);
事件流程
- 事件冒泡：当点击时 事件从最精确的元素 一层一层往上触发 直到最顶层元素 这个过程叫做事件冒泡
- 事件捕获：当点击时 事件从最顶层元素 一层一层的往下触发 直到最精确元素 这个过程叫做事件捕获
- 最精确元素： 鼠标点到谁 谁就是最精确元素
- 最顶层元素：
- 高级浏览器 最顶层元素是window
- IE中 最顶层元素是 document
阻止冒泡
-
高级浏览器中 可以通过e.stopPropagation() 进行阻止事件的冒泡
// 高级浏览器中 // box1是box2的父元素 var box1 = document.querySelector(".box1"); var box2 = document.querySelector(".box2"); box1.onclick = function() { console.log("这是BOX1"); } box2.onclick = function(e) { e.stopPropagation(); console.log("这是BOX2"); } -
IE浏览器中 可以通过e.cancelBubble = true 进行阻止事件的冒泡
// IE浏览器中 // box1是box2的父元素 var box1 = document.querySelector(".box1"); var box2 = document.querySelector(".box2"); box1.onclick = function() { console.log("这是BOX1"); } box2.onclick = function(e) { var e = e || window.event; e.cancelBubble = true; console.log("这是BOX2"); }
停止默认行为
浏览器的一些事件中，带有一些默认行为 比如a标签的点击事件中 会带有跳转页面的行为 表单的点击事件中 带有提交的默认行为 滚轮事件中 带有改变页面卷动值的默认行为
-
高级浏览器中 可以通过 e.preventDefault() 阻止默认行为
// 获取元素 var a = document.getElementsByTagName("a")[0]; // 设置点击事件 a.addEventListener("click", function(e) { console.log("点击了a标签1111"); e.preventDefault(); }, false); -
IE浏览器中 可以通过 e.returnValue = true; 阻止默认行为
// 获取元素 var a = document.getElementsByTagName("a")[0]; // 设置点击事件 a.attachEvent("onclick", function(e) { console.log("点击了a标签1111"); e.returnValue = true; }); -
DOM0级事件绑定方式中，可以通过return false进行阻止默认行为
// 获取元素 var a = document.getElementsByTagName("a")[0]; // 设置点击事件 a.onclick = function() { return false; }
事件绑定
- IE
- DOM0级 元素.on事件类型 = 事件处理函数
- 高级绑定方式 元素.attachEven(“on事件类型”, 事件处理函数)
- 高级浏览器
- DOM0级 元素.on事件类型 = 事件处理函数
- DOM2级 元素.addEventListener(事件类型, 事件处理函数, 布尔值)
事件绑定的区别
- IEDOM0级
- 只能够绑定一个函数
- 事件对象不会传递到事件函数中
- 要通过window.event来获取
- this指向这个元素
- IE高级绑定方式
- 可以绑定多个事件函数
- 执行的时候是反着执行 先绑定的后执行 后绑定的先执行
- 无法绑定到捕获阶
- 会把事件对象传递到事件处理函数中 this指向window
- 高级浏览器DOM0级
- 只能够绑定一个函数
- 事件对象不会传递到事件函数中
- 浏览器会把事件对象传递到函数中
- this指向这个元素
- 高级浏览器DOM2级
- 可以绑定多个事件函数
- 绑定顺序决定执行顺序
- 浏览器会把事件对象传递到函数中
- this指向绑定事件的元素
事件流程
事件捕获： 事件从最顶层元素开始触发，一层层向下，直到最精确元素
事件冒泡： 事件从最精确元素开始触发，一层层向上，直到最顶层元素
处于目标： 在它身上的事件是不区分捕获和冒泡的
阻止冒泡
- IE浏览器
e.cancelBubble = true - 高级浏览器
e.stopPropagation()
阻止默认行为
- IE浏览器
e.returnValue = false - 高级浏览器
e.preventDefault()
注： 如果是DOM0级绑定方式 则可以使用 return false进行默认行为的阻止
默认行为： a标签的点击时跳转 鼠标滚轮滚动时的造成页面下滑
事件委托(事件代理)
思想： 将原本子元素做的事情，委托给父元素去做。将事件绑定给父元素，父元素事件触发时，通过e.target判定触发事件的元素。决定执行对应代码。
// 1 获取元素 获取不可能被移除的父元素
var tbody = document.querySelector("tbody");
// 2 给tbody绑定事件
tbody.onclick = function(e) {
// e.target 这个属性指向触发事件的元素
console.log(e.target)
// 判定 点击到的是什么
if (e.target.className === "del") {
// 点击到的是移除按钮
e.target.parentNode.remove();
}
}
正则表达式
正则表达式是专门针对字符串而定义出来。
它是一组规则 通过特定的字符来表示不同的字符串类型
正则表达式的定义
-
字面量定义 /正则表达式/修饰符
- /\d+/g
-
构造函数定义 RegExp(正则表达式, 修饰符);
- new RegExp(“abc”, g)
- 第一个参数是正则表达式的表达体
- 第二个参数是正则表达式的修饰符
- new RegExp(“abc”, g)
-
转义字符
- \d 所有的数字
- \D 所有的非数字
- \w 所有的数字字母下划线
- \W 所有的非数字字母下划线
- \s 所有的空白符
- \S 所有的非空白符
-
特殊字符(元字符)
- . 除了回车和换行之外的其它所有内容
- () 分组 分组内是一个整体
- [] 范围
- [a-z]
- [A-Z]
- [0-9]
- [0-9A-Za-z]
- {} 数量
- {10} 限定十个 不能多也不能少
- {3,5} 最少三个 最多五个
- {1,} 最少一个 最多无穷个
- ? 零个或一个
-
- 一个或任意个
-
- 零个或任意个
- | 或者
字符串方法replace
- replace(drop, add);
- drop 被替换下的内容
- 可以是字符串
- 可以是正则表达式
- add 被替换上的内容
- 可以是字符串
- 可以是函数
- 函数的返回值是被替换上的内容
- 函数的参数
- 第一个表示匹配到的内容
- 第二个表示匹配到的内容的索引
- 第三个表示原字符串
- 如果正则表达式中有圆括号，则圆括号的内容会一一对应放在第二个参数位置及后面位置 原来的第二个参数和第三个参数会向后推移
- drop 被替换下的内容
正则表达式
正则表达式的初始化方式
字面量 => /正则表达式/修饰符
构造函数 => new RegExp(正则表达式, 修饰符); 注：字符串也有转义字符 正则表达式也有转义字符
- \d 所有的数字
- \D 所有的非数字
- \s 所有的空白符
- \S 所有的非空白符
- \w 所有的数字、字母、下划线
- \W 所有的非数字、字母、下划线
特殊字符
- () 分组
- [] 范围区间 [a-z0-9A-Z]
- {} 数量
- * 任意个
- + 至少一个
- ? 0个或1个
- . 除了回车和换行之外的任意字符
- | 或者
- ^ 如果出现在[]中 则表示方括号里的内容都不能出现 如果出现在[]之外 必须要出现在正则表达式的第一位 表示开头必须是指定的内容
- $ 表示结尾
修饰符
g 全局匹配
i 忽略大小写
m 允许多行匹配
方法
test 用于测试字符串是否符合正则表达式的描述
exec 用于对字符串执行，会返回一个数组 数组的成员是这一次匹配到的内容 index属性表示匹配到的内容第一个字符的下标 input表示原字符串 如果没有匹配到则会返回null 如果正则表达式有全局修饰符 则每一次调用都会查询下一个位置
字符串方法
replace(arg1, arg2);
arg1: 被替换下的内容
可以是字符串
可以是正则表达式
arg2: 被替换上的内容
可以是字符串
可以是函数
函数的返回值会被作为替换上的内容
函数的参数
如果正则表达式中没有() 则一共三个参数
匹配到的内容
匹配到的内容的第一个字符的下标位置
原字符串
如果正则表达式中有() 则参数个数要参照()的数量
匹配到的内容
第一个()匹配到的内容
第二个()匹配到的内容
……
匹配到的内容的第一个字符的下标位置
原字符串
1171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
