上一篇博文我们讲到了使用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>
那么我们会发现,每次我们拖动窗口,它都会在后面加两个字”小倩“,其实很简单啦,如下截图:
本来想在这篇博文里面把冒泡和捕获也说了的,看来还是等下一篇博文把。。。