关于js中绑定事件失效问题

相信很多开始学习前端开发的朋友都发生过绑定事件失效的问题，那么究竟是什么原因使得事件失效呢？

这里作者以jquery库编写作为例子。

第一种：直接失效。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //这一行语句的意思是等所有DOM树加载完成后执行绑定事件工作
$("button").click(function(){ //点击事件
$("p").hide();  //隐藏p节点对象});
});
</script>
</head>
<body>
<h2>This is a test</h2>
<p>This is a test.</p>  //点击按钮隐藏此段落
<button type="button">Click me</button>
</body>
</html>

上面的代码中若没有下面此行代码，事件是绑定不了的，这是因为在加载玩DOM树之前绑定事件就已经执行了，这时虽然执行了却找不到节点对象，所以事件会失效。

$(document).ready(function(){   //这一行语句的意思是等所有DOM树加载完成后执行绑定事件工作

如果要不使用ready()，使事件绑定则需要将js代码编写在html末端，这样做的原因是使浏览器先加载完页面DOM树信息，再加载js代码段，这样绑定的事件就可以找到对应的节点对象了。

第二种：页面跳转或者局部刷新导致绑定事件失效。

其实一切js绑定事件失效的原因根本上都是因为找不到DOM对象或着DOM对象被替换（当然写错了代码那种就不要说了。。）

我们依旧以上面的代码来讲。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //这一行语句的意思是等所有DOM树加载完成后执行绑定事件工作
$("button").click(function(){ //点击事件
$("p").hide();  //隐藏p节点对象});
});
</script>
</head>
<body>
<h2>This is a test</h2>
<p>This is a test.</p>  //点击按钮隐藏此段落
<div id="div"><button type="button">Click me</button></div>
</body>
</html>

如果此时你的button节点的被包裹于一个用于局部刷新的div块。

1.当页面加载完成后，div代码块中并没有内容，这时你通过局部刷新使button节点显示出来，此时注意：页面已经加载完成了然而你却是在它加载完成后动态的将事件的绑定对象调出来的，显然此时绑定事件会失效。（这里局部刷新的代码不给出，读者根据代码和文字联想即可，道理很简单）。

2.页面加载完成，div初次加载就有button节点，此时是没有问题的。然后使用局部刷新改变div的内容后，再使用局部刷新刷新回来button节点时，此时注意：初次加载的时候事件已经绑定过了节点对象，你使用局部刷新重新刷回来时虽然节点名称参数都是一模一样的但是已经不是同一个DOM对象了，所以重新刷回来后事件会失效。

关于js中绑定事件失效问题相关推荐

JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...
JS中绑定事件的5种方式——以按钮绑定点击事件为例
按钮 <button type="submit" id="btn">btn</button> 1. 第一种: $("#btn& ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
jQuery中绑定事件的几种方法
以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",functi ...
js循环绑定事件问题及解决方法
js初学者经常遇到的循环绑定事件问题 js循环绑定事件在编写JS代码的时候,我们经常会遇到要对一系列元素进行事件绑定的情况,然后就会理所当然的开一个for循环,对元素的事件进行赋值等操作,最后运行的 ...
JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
JS中的事件基础知识
本文首发于个人博客:www.wyb.plus JS作为一门事件驱动型的语言,了解与事件有关的知识是十分必要的. JS中与事件有关的概念非常多,本文尽量整理完善. 作者:王雨波 qq:760478684 ...
这就是为什么我们需要在React的类组件中绑定事件处理程序
by Saurabh Misra 索拉·米斯拉(Saurabh Misra) 这就是为什么我们需要在React的类组件中绑定事件处理程序 (This is why we need to bind ev ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...

关于js中绑定事件失效问题

关于js中绑定事件失效问题相关推荐

最新文章

热门文章