e.target | 返回触发事件的对象 |
e.srcElement | 返回触发事件的对象(ie6-8) |
e.type | 返回事件的类型 如click、mouseover |
e.cancelBubble | 该属性阻止冒泡(ie6-8) |
e.returnValue | 该属性阻止默认事件(ie6-8) |
e.preventDefault() | 该方法阻止默认事件 (标准) |
e.stopPropagation | 阻止 冒泡 (标准) |
this和e.target的区别:this返回的是绑定事件的对象(元素)e.targe返回的是触发事件的对象
<ul>
<li>poi</li>
<li>ads</li>
<li>ddd</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e) {//假如点击了第一个li
console.log(this);//返回ul
console.log(e.target);//返回li
})
</script>
阻止默认行为
<a href="http://www.baidu.com">百度</a>
<script>
// 阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
})
a.onclick = function(e) {
// 利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了, 而且只限于传统的注册方式
return false;
alert(11);
}
阻止事件冒泡
事件冒泡:开始由最具体的元素接收,然后逐级向上传播到DOM最顶层节点。
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
//最后只弹出son
ie已经gg了多看两个都是折磨