js事件大全_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
js事件大全
你可能喜欢西西软件园多重安全检测下载网站、值得信赖的软件下载站！
→ Jquery和JS中终止事件冒泡行为
类型：音频处理大小：1M语言：中文 评分：5.1
JavaSciprt事件中有两个很重要的特性：事件冒泡以及目标元素。事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。目
任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理的话我们可以把事
件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以很方便地得知这个事件是从哪个元素开始的。事件的冒泡和捕获捕获是从上级元素到下级元素，冒泡是从下级元素到上级元素.在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.var fnClick = function() {alert(“Clicked!”);}var oDiv = document.getElementById(“div1”);oDiv.attachEvent(“onclick”, fnClick);oDiv.detachEvent(“onclick”, fnClick);事件的冒泡有什么好处呢？想
象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格
在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，
使用事件代理的话，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。代
码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个
table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断出传到table
来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：function getEventTarget(e) {&& e = e || window.&& return e.target || e.srcE}e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElemtn属性或event.toElement属性中，而在其它浏览器里则是target或event.relatedTarget属性。接下来就是editCell函数了，这个函数调用到了 getEventTarget函数。一旦我们得到了目标元素之后，剩下的事情就是看看它是否是我们所需要的那个元素了。function editCell(e) {&& var target = getEventTarget(e);&& if(target.tagName.toLowerCase() === 'td') {&&&& // DO SOMETHING WITH THE CELL&& }}在
editCell函数中，我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里
的另一个元素呢？我们需要为代码做一点小小的修改以便于其找出父级的td
元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检
查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种。事件冒泡的优点和缺点:1.那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。2.在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可以轻松地避免它们：你的事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍。不是所有的事件都能冒泡blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。需要注意的是:如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。如何避免事件冒泡:1.方法2.方法在IE下解决问题很简单，用onMouseEnter、 onMouseLeave来代替onMouseOver、onMouseOut就行了，他们的作用基本相同，前者不会发生冒泡。但是 下没有这两个事件.3.方法:window.event.cancelBubble = true (IE)&& event.stopPropagation()& event.preventDefault() (Firefox)阻止jQuery事件冒泡jQuery对DOM的事件触发具有冒泡特性。有时利用这一特性可以减少重复代码，但有时候我们又不希望事件冒泡。这个时候就要阻止 jQuery.Event冒泡。在jQuery.Event的文档中的开头得知，jQuery.Event对象是符合W3C标准的一个事件对象，同时jQuery.Event免去了检查兼容IE的步骤。jQuery.Event提供了一个非常简单的方法来阻止事件冒泡：event.stopPropagation();$(&p&).click(function(event){&&&& event.stopPropagation();&&&& // do something})但是这个方法对使用live绑定的事件没有作用，需要一个更简单的方法阻止事件冒泡：$(this).after(&Another paragraph!&);& });
02-0102-0101-2901-2901-2801-2701-2701-1301-1201-12
阅读本文后您有什么感想? 已有23人给出评价!
名称大小下载如何终止javascript代码的执行 - ITeye问答
我想要一个点击事件去终止javascript的执行
可以考虑用setTimeout来循环执行，setTimeout同时可以得到一个token。
点击按钮的时候，用clearTimeout(token),就可以停止代码执行。
根据你的描述，应该是有一个js轮训执行，在点击一个按钮的时候，该方法不执行吧。你可以设置一个全局的标志，当点击方法执行的时候，修改该标示。在轮训的方法中，发现该标示不是默认值直接return。
&script type="text/javascript"&
var stattime=new Date();
var endtime = new Date(" 11:13:00");
if(stattime & endtime)
{
&&& alert('时间已经结束');
}
&/script&
能给出更多的信息么?
一般来说在代码里设置标志位,根据标志位做判断.
有其他操作修改这个标志,致使那段代码中断.
已解决问题
未解决问题在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
提到，在Node中timer并不是通过新开线程来实现的，而是直接在event loop中完成。下面通过几个JavaScript的定时器示例以及Node相关源码来分析在Node中，timer功能到底是怎么实现的。
JavaScript中定时器功能的特点
无论是Node还是浏览器中，都有setTimeout和setInterval这两个定时器函数，并且其工作特点基本相同，因此下面仅以Node为例进行分析。
我们知道，JavaScript中的定时器并不同于计算机底层的定时中断。中断到来时，当前执行代码会被打断，转去执行定时中断处理函数。而JavaScript的定时器到时，如果当前执行线程没有正在执行的代码，则执行相应的回调函数；如果当前有代码在执行中，JavaScript引擎既不会中断当前代码转去执行回调，也不会开新的线程执行回调，而是当前代码执行完毕之后才去处理。
console.time('A')
setTimeout(function () {
console.timeEnd('A');
var i = 0;
for (; i & 100000; i++) { }
执行上面的代码，可以看到最终输出的时间并不是100ms左右，而是数秒。这说明在循环完成之前，定时回调函数确实没有被执行，而是推迟到了循环结束。实际上在JavaScript代码执行中，所有的事件都无法得到处理，必须等到当前代码全部完成，才能去处理新的事件。这就是为什么在浏览器中运行耗时JavaScript代码时，浏览器会失去响应。为了应对这种情况，我们可以采取Yielding Processes的技巧，将耗时的代码分成小块（chunks），每处理完一块就执行一次setTimeout，约定在一小段时间后才处理下一块，而在这段空闲时间里，浏览器/Node可以去处理排队中的事件。
在JavaScript 高级程序设计 第三版第22章高级技巧中对高级定时器以及Yielding Processes有较详细的讨论。
Node中的timer实现
libuv对uv_loop_t类型的初始化
提到Node会调用libuv的uv_run函数启动default_loop_ptr进行事件调度，default_loop_ptr指向一个uv_loop_t类型的变量default_loop_struct。Node启动时会调用uv_loop_init(&default_loop_struct)对其进行初始化，uv_loop_init函数节选如下：
int uv_loop_init(uv_loop_t* loop) {
loop-&time = 0;
uv_update_time(loop);
可以看到loop的time字段先被赋值为0，之后调用uv_update_time函数,这会将最新的计数时间赋给loop.time。
初始化完成之后，default_loop_struct.time就有了一个初始值，与时间有关的操作都会与此值进行比较从而确定是否调用相应回调函数。
libuv的事件调度核心
前面提到uv_run函数就是libuv库实现event loop的核心部分，下面是其流程图：
这里简述一下上面与定时器相关的逻辑：
更新当前loop的time字段，这个字段标志着当前loop概念下的“现在”；
检查loop是否alive，也就是说检查loop中是否还有需要处理的任务（handlers/requests），如果没有就不必循环了；
检查注册过的timer，如果某一个timer中指定的时间落后于当前时间了，说明该timer已到时，于是执行其对应的回调函数；
执行一次I/O polling（即阻塞住线程，等待I/O事件发生），如果在下一个timer到期时还没有任何I/O完成，则停止等待，执行下一个timer的回调。
如果发生了I/O事件，则执行对应的回调；由于执行回调的时间里可能又有timer到期了，这里要再次检查timer并执行回调。
（实际上(4.)这里比较复杂，不仅仅是一步操作，这样描述仅是为了不涉及其他细节，而专注于timer的实现。）
Node会一直调用uv_run直到loop不再alive。
Node中的timer_wrap与timers
Node中有一个TimerWrap类，被注册为Node内部的timer_wrap模块。
NODE_MODULE_CONTEXT_AWARE_BUILTIN(timer_wrap, node::TimerWrap::Initialize)
其中TimerWrap类基本上就是对uv_timer_t的一个直接封装，NODE_MODULE_CONTEXT_AWARE_BUILTIN是Node用于注册built-in模块的宏。
经过这一步操作，JavaScript就可以拿到这个模块进行操作了。src/lib/timers.js文件使用JavaScript的形式把timer_wrap的功能封装起来，并导出了exports.setTimeout, exports.setInterval, exports.setImmediate等函数。
Node启动与global初始化
提到Node启动时会载入执行环境LoadEnvironment(env)，这个函数中非常重要的一步就是载入src/node.js并执行，src/node.js会载入指定的模块并初始化global和process。当然，setTimeout等函数也会被src/node.js绑定到global对象上。
至此，setTimeout/setInterval这类定时器函数已经可以为JavaScript所用了。
3 收藏&&|&&31
你可能感兴趣的文章
7 收藏，330
70 收藏，8.9k
4 收藏，1.4k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。Javascript事件绑定的几种方式
script的事件绑定主要有四种方法（一下在IE中运行正常，但不保证其他）：
[注：onXXX为某一事件，fun为某一function，domId为某一DOM对象id，event类型见后边附录。]
1、在DOM中，直接用onXXX=&fun();&进行绑定
2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定
3、用 DOM对象.attachEvent(&onXXX&,fun) 进行绑定
4、用&script for=&domId& event=&onXXX&&fun();&/script& 进行绑定
[javascript]
&title&event test&/title&
&body onload=&init()&&
&!-- 绑定方式一:在元素中，通过onXXX（事件）设置绑定方法 --&
&button id=&btn1& onclick=&display()& &绑定方式一&/button&
&!-- 绑定方式二：在Javascript代码中，通过获得元素，为元素的onXXX（事件）设置绑定方法 --&
&button id=&btn2&&绑定方式二&/button&
&!-- 绑定方式三：通过for、event为元素绑定事件（IE4+）。for后面是元素id，event是具体事件 --&
&button id=&btn3&&绑定方式三&/button&
&!-- 绑定方式四：通过attachEvent为元素绑定事件（IE5+）。第一个参数是事件名，第二个参数是绑定的方法 --&
&button id=&btn4&&绑定方式四&/button&
&script type=&text/javascript&&
function init() {
document.getElementById(&btn2&).onclick =//为button2绑定事件
document.getElementById(&btn4&).attachEvent(&onclick&, display);//为button4绑定事件
function display(event) {
//触发事件的对象引用
if (!event) {
var event = window.//获得当前事件(IE)
if (event.target) {//IE没有target
targ = evente.
} else if (event.srcElement) {//适用于IE
targ = event.srcE
//对触发事件的对象进行操作
alert(targ.tagName+&-&+targ.id+&-&+event.x+&-&+event.offsetX);
targ.disabled=&disabled& ;
&script for=&btn3& event=&onclick&&
display();//为button3绑定事件
[javascript] view plaincopy
&title&event test&/title&&
&body onload=&init()&&&
&!-- 绑定方式一:在元素中，通过onXXX（事件）设置绑定方法 --&&
&button id=&btn1& onclick=&display()& &绑定方式一&/button&&
&!-- 绑定方式二：在Javascript代码中，通过获得元素，为元素的onXXX（事件）设置绑定方法& --&&
&button id=&btn2&&绑定方式二&/button&&
&!-- 绑定方式三：通过for、event为元素绑定事件（IE4+）。for后面是元素id，event是具体事件& --&&
&button id=&btn3&&绑定方式三&/button&&
&!-- 绑定方式四：通过attachEvent为元素绑定事件（IE5+）。第一个参数是事件名，第二个参数是绑定的方法 --&&
&button id=&btn4&&绑定方式四&/button&&
&script type=&text/javascript&&&
&&& function init() {&
&&&&&&& document.getElementById(&btn2&).onclick =//为button2绑定事件&
&&&&&&& document.getElementById(&btn4&).attachEvent(&onclick&, display);//为button4绑定事件&
&&& function display(event) {&
&&&&&&&//触发事件的对象引用&
&&&&&&& if (!event) {&
&&&&&&&&&&& var event = window.//获得当前事件(IE)&
&&&&&&& }&
&&&&&&& if (event.target) {//IE没有target&
&&&&&&&&&&& targ = evente.&
&&&&&&& } else if (event.srcElement) {//适用于IE&
&&&&&&&&&&& targ = event.srcE&
&&&&&&& }&
&&&&&&& //对触发事件的对象进行操作&
&&&&&&& alert(targ.tagName+&-&+targ.id+&-&+event.x+&-&+event.offsetX);&
&&&&&&& targ.disabled=&disabled& ;&
&script for=&btn3& event=&onclick&&&
&&& display();//为button3绑定事件&
附一：event事件：
onabort： 图像的加载被中断
onblur： 元素失去焦点
onchange： 域的内容被改变
onclick： 当用户点击某个对象时调用的事件句柄
ondblclick： 当用户双击某个对象时调用的事件句柄
onerror： 在加载文档或图像时发生错误
onfocus： 元素获得焦点
onkeydown： 某个键盘按键被按下
onkeypress： 某个键盘按键被按下并松开
onkeyup： 某个键盘按键被松开
onload： 一张页面或一幅图像完成加载
onmousedown： 鼠标按钮被按下
onmousemove： 鼠标被移动
onmouut： 鼠标从某元素移开
onmouseover： 鼠标移到某元素之上
onmouseup： 鼠标按键被松开
onreset： 重置按钮被点击
onresize： 窗口或框架被重新调整大小
onselect： 文本被选中
onsubmit： 确认按钮被点击
onunload： 用户退出页面
附二：IE event属性：
cancelBubble： 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement ：对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode ：对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY ：发生事件的地点在事件源元素的坐标中的 x 坐标和 y 坐标。
returnValue： 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement ：对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement： 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y： 事件发生的位置的 x 坐标和 y 坐标，它们相对于用动态定位的最内层包容元素。
作者：cqkxzyi