javascript事件之: 事件冒泡, 事件捕获 ,阻止默

页面导航:首页 > 网络编程 > JavaScript > javascript事件之: 事件冒泡, 事件捕获 ,阻止默

javascript事件之: 事件冒泡, 事件捕获 ,阻止默

来源: 作者: 时间:2016-02-05 11:06 【

谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 冒泡篇: 先来看一段实例: js: var $input = document getElementsByT
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
 
  冒泡篇:
 
  先来看一段实例:
 
  js:
 
 
        var $input = document.getElementsByTagName("input")[0];
        var $div = document.getElementsByTagName("div")[0];
        var $body = document.getElementsByTagName("body")[0];
        
        $input.onclick = function(e){
            this.style.border = "5px solid red"
            var e = e || window.e;
            alert("red")
        }
        $div.onclick = function(e){
            this.style.border = "5px solid green"
            alert("green")
        }
        $body.onclick = function(e){
            this.style.border = "5px solid yellow"
            alert("yellow")
        }
 
html:
 
    <div>
        <input type="button" value="测试事件冒泡" />
    </div>
依次弹出”red“,"green","yellow"。
 
你的本意是触发button这个元素,却连同父元素绑定的事件一同触发。这就是事件冒泡。
 
如果对input的事件绑定改为:
 
$input.onclick = function(e){
    this.style.border = "5px solid red"
    var e = e || window.e;
    alert("red")
    e.stopPropagation();
}
这个时候只会弹出”red“
 
因为阻止了事件冒泡。
 
 
 
捕获篇:
 
既然有事件的冒泡,也可以有事件的捕获,这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。
 
来看代码:
 
 
 
$input.addEventListener("click", function(){
    this.style.border = "5px solid red";
    alert("red")
}, true)
$div.addEventListener("click", function(){
    this.style.border = "5px solid green";
    alert("green")
}, true)
$body.addEventListener("click", function(){
    this.style.border = "5px solid yellow";
    alert("yellow")
}, true)
 
这个时候依次弹出”yellow“,"green","red"。
 
这就是事件的捕获。
 
如果把addEventListener方法的第三个参数改成false,则表示只在冒泡的阶段触发,弹出的依次为:”red“,"green","yellow"。
 
 
 
阻止默认事件篇:
 
有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。
 
如果你想阻止这些默认行为,Script为你提供了方法。
 
先上代码
 
 
1 var $a = document.getElementsByTagName("a")[0];
2 $a.onclick = function(e){
3     alert("跳转动作被我阻止了")
4     e.preventDefault();
5     //return false;//也可以
6 }
 
 
默认事件没有了。
 
既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。
 
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<