您的位置：首页 > Web前端 > JavaScript

2014年辛星解读Javascript之DOM之事件绑定

2014-07-26 05:38 309 查看

上一篇博文我们讲到了使用Javascript来响应用户的操作，然后还在HTML中和Javascript中分别实现了对事件的响应，其实我们还可以用addEventListener()这个方法来给指定的元素添加事件句柄，从而达到一种动态添加事件绑定的作用，看如下代码：

<html>
<p id = "tag" >辛星</p>
<script type="text/javascript">
	document.getElementById("tag").addEventListener("click",myshow);
	function myshow(){
		document.getElementById("tag").innerHTML = "小楠";
	}
</script>
</html>

这个代码的效果和上一篇博文中提到的效果是一样的，点击”辛星“会变成”小楠“，但是这个事件的绑定是通过一个函数addEventLinstener来完成的，它有什么好处？它至少会让我们监听事件更加方便，而且它可以让我们的一个元素监听多个类型的事件，其实对同一个事件，也可以添加多个函数，这才是它的独特之处，比如我们看如下代码：

<html>
<p id = "tag" >辛星</p>
<script type="text/javascript">
	document.getElementById("tag").addEventListener("click",myshow);
	document.getElementById("tag").addEventListener("click",myalert);
	function myshow(){
		document.getElementById("tag").innerHTML = "小楠";
	}
	function myalert(){
		alert("辛星你好");
	}
</script>
</html>

比如这个代码段，当我们点击”辛星“这个文字的时候，它就会弹出一个提示框，并且同时修改其文本，这点确实很方便，我们可以用removeEventListener()方法来移除对事件的监听，这可以让我们动态的修改对事件的绑定，这两个函数一起，可以动态的做很多事情了就。

下面我们说一下它的语法格式把，它的语法格式是下面这样的：

elment.addEventListener(event,function,useCapture);

很好理解，其中的element即HTML元素，而event即事件类型，其中的function即事件出发后调用的函数，而第三个参数是一个布尔值，表示是冒泡还是捕获，这个我们下面再说明。值得一提的是，这里的事件就是单纯的事件类型，因此，比如鼠标的点击就用click，而不是onclick什么的，记住一点就可以了：尽可能简单，事件就是事件，没有on什么之类的。

当然了，这里的function其实是可以直接写函数的功能的，也可以用一个函数名，但是注意函数名不要加括号，否则会直接调用，就达不到效果了，还是记住一点：尽可能简单，不加括号什么的简单，因此，不要加括号，看下面的示例代码：

<html>
<p id = "tag" >辛星</p>
<script type="text/javascript">
	document.getElementById("tag").addEventListener("click",function(){
		alert("我是辛星");
	});
</script>
</html>

我想我们很轻松的就可以从上述代码中知道它是什么意思，确实，他也就是我们点击”辛星“的时候，弹出一个对话框，对话框里面显示”我是辛星“这么几个字。

前面我们一直都对HTML元素进行操作，事实上我们还可以操作window，即直接操作浏览器窗口，我们对它进行事件绑定，比如如下代码：

<html>
<p id = "tag" >辛星</p>
<script type="text/javascript">
	window.addEventListener("resize",myshow);
	function myshow(){
		document.getElementById("tag").innerHTML += "小倩";
	}
</script>
</html>

那么我们会发现，每次我们拖动窗口，它都会在后面加两个字”小倩“，其实很简单啦，如下截图：

本来想在这篇博文里面把冒泡和捕获也说了的，看来还是等下一篇博文把。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航