DOM事件与对象
1、事件侦听(点击一次实现触发两种功能)
语法: btn.addEventListener()
示例:
btn.addEventListener('click',function(){
alert('你好1');
})
btn.addEventListener('click',function(){
alert('你好2');
创建button 按钮,使用addEventListener实现侦听事件。
2、解除侦听事件
语法:btn.addEventListener()
var div = document.querySelectorAll('div');
div[0].addEventListener('click',fn);
function fn(){
alert('你好!');
div[0].removeEventListener('click',fn);
}
// 移除侦听 点击一次后,取消点击事件
3、事件流–捕获与冒泡
捕获阶段执行顺序 html --> father --> son
在三个层级盒子内 设置father 和 son 点击事件中 ,当点击son盒子 先执行father在执行son
示例:
// 1.捕获阶段 石头下层 执行顺序 html --> div --> son
var son = document.querySelector('#son');
var father = document.querySelector('#father')
son.addEventListener('click',function(){
alert('lalallalal,我是son')
},true);
father.addEventListener('click',function(){
alert('lalallalal,我是父亲')
},true);
.冒泡阶段 石头下沉气泡 执行顺序 son --> father --> html
在三个层级盒子内 设置father 和 son 点击事件中 ,当点击son盒子 先执行son在执行father
在开发时,用的比较多的是冒泡阶段。
示例:
// 2.冒泡阶段 石头下沉气泡 执行顺序 son --> div --> html
var son = document.querySelector('#son');
var father = document.querySelector('#father')
son.addEventListener('click',function(){
alert('lalallalal,我是son')
},false);
father.addEventListener('click',function(){
alert('lalallalal,我是father')
},false);
4、this与e.target事件
示例:
// this 返回的是绑定事件,也就是注册事件是谁就返回谁
var ul = document.querySelector('ul');
ul.addEventListener('click',function(){
console.log(this);
})
// target 返回的是触发事件 哪个元素做了那些事件操作,就返回当前的元素和操作
var div = document.querySelector('div');
div.addEventListener('click',function(e){
console.log(e.target);
})
**区别:this返回被绑定元素对象,target返回的是触发事件对象
5、阻止默认事件
让页面不能进行跳转,或者让提交按钮不能提交
语法: e.preventDefault()
示例:
var a = document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefault()
})
6、阻止事件冒泡
语法:e.stopPropagation()
示例:
当点son盒子 不会触发其他盒子
// 阻止事件冒泡。当点击当前事件,不触发其他事件
var son = document.querySelector('#son');
var father = document.querySelector('#father')
son.addEventListener('click',function(e){
alert('lalallalal,我是son')
e.stopPropagation();
},false);
father.addEventListener('click',function(){
alert('lalallalal,我是father')
},false);
7、事件委托
前言:因为在li列表当中 需要给每个小li设置监听事件,会比较麻烦,而且会影响页面的交互就绪时间。
事件委原理:
不是在每个子节点上设置监听事件,而是在设置在其父节点上,利用冒泡原理影响每个子节点
示例:
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<body>
<script>
// 事件委托 原理:在其父节点上设置侦事件,来影响子节点
var ul = document.querySelector('ul');
ul.addEventListener('click',function(){
alert('你很牛啊!')
// e.target 可以得到点击对象
})