事件处理
- 事件：javaScript可以侦测到的行为（用户在页面上进行的某种操作）
- 页面加载（浏览器打开页面）
- 单击鼠标
- 鼠标进入某个区域
- 焦点
- 键盘
- 事件处理程序：用户进行了某种操作后，所运行的javascript程序段
- 用户进行某种操作后，所运行的javascript程序段
- 事件驱动式：当事件发生后才去执行相应的程序
- 事件流：事件发生时，会在发生时间到额元素节点与DOM树根节点之间按照特定的顺序进行传播，这个事件传播的过程就是事件
- 在web中对事件流的解决方案：
- 事件捕获：网景公司（Netscape）,事件流传播的顺序应该是从DOM树的根节点发生到事件的元素节点
- 事件冒泡：微软公司（Microsoft），事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点
冒泡的的前提是，父级也定义了相应的事件，当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发-----冒泡机制
-
w3c的事件处理：在事件发生阶段采用冒泡
-
事件捕获的实现：
-
addEventListener(事件名，事件处理程序，事件处理方式)
参数1：事件名（click,change、load、mousedown…）
参数2：事件处理程序（）
参数3：事件处理方式（true–表示采用事件捕获方式）默认为false
-
<div id="myDiv">
<div class="child" id="child"></div>
</div>
<script>
document.getElementById('myDiv').addEventListener('click', function () {
alert('mydiv事件被触发')
})
document.getElementById('child').addEventListener('click', function (e) {
alert('child事件被触发')
if (window.event) {
window.event.cancelBubble = true
}else{
e.stopPropagation()
}
})
事件的绑定方式
-
行内绑定
<标签名 事件名=“事件处理程序”></标签名>
-
动态绑定式
DOM对象名.事件名 = 事件处理程序。
行内绑定和动态绑定的区别
- 行内绑定式中事件名作为标签的属性，“动态绑定式中事件名作为DOM对象的属性”
- 行内绑定式的事件处理程序中的this代表的是window对象，动态绑定式的事件处理程序中的this代表的是触发事件的DOM对象
相同点：一个DOM对象的同一个事件只能有一个事件处理程序
事件监听式
可以给DOM对象的同一个事件绑定多个事件处理程序
- DOM对象.addEventListener(type,callback)//早起IE浏览器
- DOM对象.addEventListener(type,callback,[capture]);//标准浏览器
删除事件绑定
DOM对象.removeEvenListener(type,callback);
事件对象
- 来源：当事件发生时，都会产生一个事件对象（event对象）
- 作用：通过事件对象可以了解与事件相关的信息
- 获取事件对象：
- 早期的IE浏览器：window.event
- 标准浏览器：将一个event对象直接传入事件处理程序中
常用属性
- type：代表当前事件类型
- target：返回触发此事件的的元素（事件的目标节点）
- currentTarget：返回触发此事件的的元素（事件的目标节点）
- bubbles：查看事件是否冒泡
常用函数
- stopPropagation()：组织冒泡
- prevenDefault()：组织默认行为
事件分类
页面事件
- load： 用于 body内所有标签都加载完成后才触发
- unload： 用于页面关闭时触发，经常用于清除变量，避免内存的泄露
焦点事件
多用于表单验证
- focus：当获取焦点时触发
- blur：失去焦点时触发
<style>
.ok {
color: green;
}
.fail {
color: red;
}
</style>
</head>
<body>
<div>
用户名： <input type="text" id="userName"><span id="nameInfo"></span>
<br><br>
密码： <input type="text" id="pwd"><span id="pwdInfo"></span>
</div>
<script>
var cc = document.getElementById('userName');
cc.addEventListener('blur', function () {
if (this.value === 'abc') {
document.getElementById('nameInfo').classList.remove('fail')
document.getElementById('nameInfo').innerHTML = '用户名正确'
document.getElementById('nameInfo').classList.add('ok')
} else {
document.getElementById('nameInfo').classList.remove('ok')
document.getElementById('nameInfo').innerHTML = '用户名错误'
document.getElementById('nameInfo').classList.add('fail')
}
})
var pwd = document.getElementById('pwd');
var psp = document.getElementById('pwdInfo');
pwd.addEventListener('blur', function () {
if (pwd.value.length > 6 && pwd.value.length <= 16) {
psp.classList.remove('fail')
psp.innerHTML='密码长度正确'
psp.classList.add('ok')
}else{
psp.classList.remove('ok')
psp.innerHTML='长度不够'
psp.classList.add('fail')
}
})
</script>
鼠标事件
- click：鼠标事件
- dbclick：鼠标双击
- mouseover：鼠标进入
- mouseout：鼠标离开
- change：当内容发生改变时触发 input
body>
<select name="" id="bg">
<option value="%">请选择</option>
<option value="blue">蓝色妖姬</option>
<option value="red">血腥玛丽</option>
<option value="green">青青草原</option>
</select>
<script>
var bg = document.getElementById('bg');
bg.addEventListener('change', function () {
document.body.style.backgroundColor = this.value
})
</script>
- mousedown：当按下鼠标任意按键触发
- mouseup：当释放任意鼠标按键时触发
- mousemove：当元素内部移动鼠标会触发
鼠标的位置信息获取
- clientX：鼠标指针位于浏览器页面当前窗口可视区的水平坐标（x轴坐标）
- clientY：鼠标指针位于浏览器页面当前窗口可视区的水平坐标（Y轴坐标）
- pageX：鼠标指针位于文档的水平坐标（X坐标）
- pageY：鼠标指针位于文档的垂直坐标（Y坐标）
- screenX：鼠标指针位于屏幕的水平坐标（）
<style>
#sss {
position: absolute;
width: 30px;
height: 15px;
line-height: 15px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div id="sss"></div>
<script>
window.onload = function () {
// 获取div
var div = document.getElementById(`sss`);
// 给document绑定mousemove事件
document.onmousemove = function (e) {
// 获取鼠标指针在浏览器可视窗口中的坐标
var left = e.clientX + 'px'
var top = e.clientY + 'px'
div.style.left = left;
div.style.top = top;
div.innerHTML = `${left},${top}`
}
}
</script>
事件对象的兼容性处理
- 早起IE浏览器版本获取事件对象的方法：window.event
- 标准浏览器获取事件对象的方法：event
- DOM对象.addEventListener(‘事件名称’，function(e){
var my_event = e | window.event
})
- 早起IE浏览器对事件对象的pageX和pageY兼容性处理：
var pageX = event.pageX || event.clientX = document.documentElement.scrollLeft; - var pageY = event.pageY || event.clientY = document.documentElement.scrollTOP;
键盘事件
用户在使用键盘时触发
- keypress：键盘上按键按下时触发，不包含非字符按键，保存是按键的ASCII码值
- 空格32 a97 A65
- keydown：键盘上按键按下时触发
- keyup：键盘按键弹起时触发
- keydown和keyup保存的是按键的虚拟键码
表单事件
- submit：当表单提交时触发
- reset：当表单重置时触发
正则表达式
- 是描述字符串结构的语法规则
- 是用于匹配字符串中字符组合的模式
- 是一个对象
特点
- 非常灵活
- 逻辑性非常强
- 以简单的方式达到对字符串进行复杂的控制
创建正则表达式
- 字面量
- var 变量名 = / 表达式 /
- 使用RegExp构造函数
- var 变量名 = RegExp(/表达式/)
- var 变量名 = new RegExp（/表达式/）
正则表达式的使用
-
test()方法
- 返回boolean值，true表示复合正则规则，false表示不符合正则规则。
- 正则对象.test（被验证的字符）。
-
模式修饰符：/表达式/[switch]
-
swith:是模式修饰字符，是可选的，通过它可以对正则进行进一步的设置。
g：全局匹配。
i：忽略大小写。
-
-
边界符
- ^：表示谁开头。
- $：表示谁结尾。
-
预定义字符
- . ：除了\n之外的任意单个字符。
- \d ： 表示0-9的任意数字，等价于[0-9]。
- \D ：表示匹配0-9以外的字符，等价于[ ^0-9]
- \w ：表示匹配任意字母、数字和下划线。等价于[a-zA-Z0-9]
- \W：除所有字母、数字和下划线以外的字符，相当于[ ^a-zA-Z0-9]
- \b ：单次分解符
- \s ：匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
**match（正则表达式方法）:是String对象的方法，用来截取符合正则表达式规则的子串 **
强调：转义字符 \ "若要出输出反斜杠要使用连续两个’\’
[^cat]：匹配除c、a、 t 以外的字符
[A-Z]：匹配字母A-Z范围内的字符
[\u4e00-\u9fa5]：匹配任意一个中文字符
字符组合：如果允许用户输入英文字母（不区分大小写）、数字、短横线、下换线_的正则规则情况
var rg = /1$/
量词符：
{m,n}：表示{}之间的字符可以出现m~n次{n}：表示{}之前的字符可以出现n次
a-zA-Z0-9_- ↩︎
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
