JavaScript事件冒泡与事件捕获实例分析_javascript技巧_脚本之家

1.用javascript重新定义 window.onbeforeunload(卡塔尔 事件
在javascript里定义多个函数就能够 function window.onbeforeunload}
alert(卡塔尔(قطر‎事件将会在闭馆窗口前奉行,你也能够客商决定是不是关闭窗口 function
window.onbeforeunload(卡塔尔(قطر‎ { if (event.clientX>document.body.clientWidth
&& event.clientY<0 ||event.altKey)window.event.returnValue=”鲜明要退出本页吗?”; } 2.用onUnload方法
在body 标签里投入onUnload事件 body onUnload=”myClose(卡塔尔(英语:State of Qatar)”
然后在javascript里定义myClose(卡塔尔(قطر‎方法
然而onUnload方法是在关门窗口之后实施,不是在闭馆窗口早先实行,即便你想在关闭窗口从前做决断,请用第意气风发种格局

在IE7/ Firefox 3.0/ 谷歌(Google卡塔尔(英语:State of Qatar) Chrome通过测量试验 Close德姆o.htm 复制代码 代码如下:

JavaScript捕获window窗口关闭事件

行事中遭遇犹如此的面貌,要在浏览器窗口关闭的时候,提示顾客某种操作。
恍如在关门窗口时,提醒顾客保存当前内容,采纳是则保留并关闭窗口,接纳不然不苏息窗口,也不做保留操作。

网络找了点不清,都是说用js管理window关闭事件的,要么说onbeforeunload
方法,要么说onunload方法。
备感都不可能贯彻。后来意想不到想到这么的点子:用这多少个措施一齐来兑现!

原因:
onbeforeunload
事件将会在关门窗口前实行,你也足以顾客决定是不是关闭窗口,那些办法只要有重回值并且不是””或null;他就能够出一个唤起窗口(对ie,firefox未有试过)。
单用那八个方法不可能兑现地点说的出提醒,选取“是”,然后做保留动作的。

且不为空再次回到值会做为提醒是不是关闭本窗口的内容提醒。
onunload
是在关门窗口之后奉行,不是在关门窗口以前执行。在这里方式里不管做了怎么样,最终窗口都会停业。

现行反革命将那七个形式合起来,就刚刚达成了大家的需求,第八个方法出提醒,第一个法子达成选用“是”后的动作:即保存数据。

那边给出示例代码,不思虑刷新的主题素材。

var isSave =false;
function save(){
//dosomething
}
window.onbeforeunload =function() {

if(!isSave){
return “当前数码还并未保存,关闭或刷新窗口会活动保存数据,是或不是继续?”;
}else{
return “”;
}
}
window.onunload =function() {
if(!isSave){
save();
}
}

职业中碰着宛如此的意况,要在浏览器窗口关闭的时候,提醒客商某种操作。
相仿在关门窗口时,提醒客户…

正文实例叙述了JavaScript事件冒泡与事件捕获。分享给大家供大家参谋,具体如下:

小心“ 倘使你使用的是firefox浏览器一定要做以下设置
1、在地方栏输入about:config然后回车,警报确认
2、在过滤器中输入”dom.allow_scripts_to_close_windows“,双击就能够将此值设为true
就可以完毕了 测量试验相比较好用代码:认为网上老铁回复

1、事件冒泡

[Ctrl+A 全选 注:如需引进外部Js需刷新工夫举行]

在贰个对象上接触某类事件,如onclick事件等,在其祖先节点上也会挨个触发该事件。

  事件冒泡 

依次输出:a、div、body

注意:不是具备的事件都能冒泡。blurfocusloadunload等事件不冒泡。

2、阻止事件冒泡

若只期望事件发生在该子成分并不是在它的上代成分上,则须求阻止事件冒泡。

IE浏览器和任何浏览器阻止事件冒泡的措施分歧:

function stopBubble{ if(e && e.stopPropagation) e.stopPropagation(); // 非IE浏览器 else window.event.cancelBubble = true; // IE浏览器}

 事件冒泡 function stopBubble{ if(e &amp;&amp; e.stopPropagation) e.stopPropagation(); // &#38750;IE&#27983;&#35272;&#22120; else window.event.cancelBubble = true; // IE&#27983;&#35272;&#22120; } document.getElementsByTagName[0].onclick = function; alert; } document.getElementsByTagName[0].onclick = function; alert; } document.getElementsByTagName[0].onclick = function; alert; }

3、事件冒泡与事件捕获

事件捕获:事件从document起先往下搜索,直到捕获到事件指标。

事件冒泡:事件从事件指标开端,往上冒泡直到document截至。

传统的element.onclick = doSomething那般的平地风波绑定,通常采用的是事件冒泡情势。

  document.getElementsByTagName[0].onclick = function; }; document.getElementsByTagName[0].onclick = function; };

实则,可以挑选绑定事件时接纳事件捕获依然事件冒泡,方法是绑定事件时经过addEventListener函数,它有3个参数,第4个参数若是true,则代表接收事件捕获,假使false,则意味着接收事件冒泡,如element.addEventListener('click', doSomething, true)

  document.getElementsByTagName[0].addEventListener { alert; document.getElementsByTagName[0].addEventListener { alert;

  document.getElementsByTagName[0].addEventListener { alert; document.getElementsByTagName[0].addEventListener { alert;

注意:Chrome和Firefox都扶植事件捕获和事件冒泡,但IE只扶植事件冒泡,不帮助事件捕获,也不帮衬addEventListener函数,提供了另叁个函数attachEvent,如ele.attachEvent("onclick", doSomething)

更加多关于JavaScript相关内容感兴趣的读者可查阅本站专题:《JavaScript事件有关操作与技术大全》、《JavaScript页面成分操作技巧计算》、《JavaScript操作DOM本领计算》、《JavaScript查找算法手艺总计》、《JavaScript数据布局与算法技术总括》、《JavaScript遍历算法与手艺总括》及《JavaScript错误与调度手艺总括》

指望本文所述对我们JavaScript程序设计具备助于。

相关文章