事件机制
1.事件处理程序
为了在用户点击元素时执行代码,请向HTML事件属性添加JavaScript代码:
<div id="one" onclick="test(event)">点击我啊</div>
<button id="btn">点击我</button>
window.onload = function () {
// 获取btn
var btn=document.getElementById('btn');
// 获取div
var div=document.getElementsByTagName('div')[0];
//点击按钮修改div的样式
btn.onclick=function(){
alert('我被点击了');
div.style.width='200px';
div.style.height='200px';
div.style.backgroundColor='red';
div.innerHTML='我被点击了'
}
}
function test(event) {
alert(1);
console.log(1,event);
}
2.事件由三部分构成
事件源 事件类型 事件处理程序 我们也称为事件三要素
1.事件源:事件被触发的对象 -->按钮对象
2.事件类型:如何触发?触发什么事件?例如鼠标点击,键盘按下等…
3.事件处理程序:通过一个函数赋值的方式
执行事件的步骤
1.获取事件源
2.注册事件(绑定事件)
3.采用函数赋值形式添加事件处理程序
3.事件冒泡
在第四代Web浏览器(IE4和Netscape Communicator4)开始开发时,
开发团队碰到了一个有意思的问题:页面哪个部分拥有特定的事件呢?
要理解这个问题,可以在一张纸上画几个同心圆。把手指放到圆心上,
则手指不仅是在一个圆圈里,而且是在所有的圆圈里。
两家浏览器的开发团队都是以同样的方式看待浏览器事件的。
当你点击一个按钮时,实际上不光点击了这个按钮,还点击了它的容器
以及整个页面。事件流描述了页面接收事件的顺序。
结果非常有意思,IE和Netscape 开发团队提出了几乎完全相反
的事件流方案。IE将支持事件冒泡流,而NetscapeCommunicator将支持事件捕获流。
1.事件冒泡(IE事件流)
var inner = document.getElementById('inner');
var center = document.getElementById('center');
var outer = document.getElementById('outer');
// 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样
inner.onclick = function () {
console.log('我是inner点击的');
}
// 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发,这就是事件冒泡现象
center.onclick = function () {
console.log('我是center点击的');
}
outer.onclick = function () {
console.log('我是outer点击的');
}
outer.onclick = function (event) {
console.log(event);
console.log(this);
// 事件目标,触发事件的源元素
console.log(event.target);
// 当前事件目标,当前执行事件处理函数的元素
console.log(event.currentTarget);
console.log(this === event.currentTarget);
}
//查看文档中
function handle(event) {
console.log(this);
console.log(event.target);
console.log('--------');
}
// handle()
outer.onclick = handle;
center.onclick = handle;
inner.onclick = handle;
在点击页面中的id为inner的div元素,click事件会以如下顺序发生
1. div#inner
2. div#center
3. div#outer
4. body
5. html
6. document
4.阻止事件冒泡
event.stopPropagation()
如果点击方法时需要同时传递其他参数和event,直接传递event这个单词即可
5.事件捕获(Netscape事件流)
Netscape Communicator 团队提出了另一种名为事件捕获的事件流。
事件捕获的意思是最不具体的节点应该最先收到事件,
而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达
最终目标前拦截事件。如果前面的例子使用事件捕获,则点击div元素
会以下列顺序触发 click 事件:
1. document
2. html
3. body
4. div
6.DOM事件流(事件冒泡和事件捕获)*******
描述的是从页面接收事件的顺序
事件冒泡(从内向外):最具体的节点应该最先收到事件,不具体的节点最后收到事件
事件捕获(从外向内):不具体的节点应该最先收到事件,而最具体的节点应该最后收到事件。
7.阻止事件默认行为
var btn=document.getElementsByTagName('button')[0];
var a=document.getElementsByTagName('a')[0];
btn.οnclick=function(event){
event.preventDefault()
}
a.οnclick=function(event){
event.preventDefault()
}
8.DOM0级事件 DOM2级事件
DOM2级事件
addEventListener()
它们接收 3 个参数:事件名、事件处理函数和一个布尔值,
true 表示在捕获阶段调用事件处理程序,false(默认值)
表示在冒泡阶段调用事件处理程序。
removeEventListener()
var outer=document.getElementById('outer');
var center=document.getElementById('center');
var inner=document.getElementById('inner');
function handler(){
console.log(this.id);
}
outer.addEventListener('click',handler,true);
center.addEventListener('click',handler,true);
inner.addEventListener('click',handler,true);
}
9.事件代理(事件委托)
将本应该添加给子元素的事件添加给父元素
事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素)
来处理。也就是:利用冒泡的原理,把事件加到父级上,
通过判断事件来源的子集,执行相应的操作。使用事件委托技术能让你
避免对特定的每个节点添加事件监听器。
list.οnclick=function(event){
switch(event.target.id){
case 'one':
event.target.innerHTML='我是One'
break;
case 'two':
event.target.innerHTML='我是two'
break;
case 'three':
event.target.innerHTML='我是three'
break;
}
}
10.事件类型
1.鼠标滚动事件onscroll
<div id="d1" style="width: 100px;height: 100px;border: 1px solid; overflow: auto;">我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
<script>
var d1 = document.getElementById('d1');
d1.onscroll = function () {
console.log('onscroll');
}
</script>
2.焦点事件
blur 当元素失去焦点时触发。这个事件不冒泡,所有浏览器都支持。
focus 当元素获得焦点时触发。这个事件不冒泡,所有浏览器都支持。
<input type="text" id="inp1">
<script>
var inp1 = document.getElementById('inp1');
// 失去焦点触发
inp1.onblur = function () {
console.log('失去焦点');
console.log(this.value);
}
// 获得焦点触发
inp1.onfocus = function () {
console.log('获得焦点');
}
</script>
3.鼠标事件
<div id="d1"></div>
<script>
var d1 = document.getElementById('d1');
// 单击事件
d1.onclick = function (event) {
console.log('click');
console.log(event);
}
// 双击事件
d1.ondblclick = function () {
console.log('dblclick');
}
// 鼠标移入事件
d1.onmouseenter = function () {
console.log('mouseenter');
}
// 鼠标移出事件
d1.onmouseleave = function () {
console.log('mouseleave');
}
// 鼠标在元素内部移动时触发
d1.onmousemove = function () {
console.log('mousemove');
}
</script>
4.键盘事件
<input type="text" id="inp1">
<script>
var inp1 = document.getElementById('inp1');
// 按下某个按键是触发
inp1.onkeydown = function (event) {
if (event.keyCode == 13) {
console.log('确认');
console.log(this.value);
}
}
// 按下键盘上某个键并产生字符时触发,而且持续按住会重复触发
inp1.onkeypress = function (event) {
console.log(event.keyCode);
}
// 用户释放键盘上某个键时触发
inp1.onkeyup = function (event) {
console.log(event.keyCode);
}
</script>
重要:::: console.log(this===event.currentTarget); //true