DOM:document object model(文档对象模型):
今天学习了通过三种方法来实现一个小demo------>点击button来实现alert弹框
方法一:
//方法一、
<input type="button" value="方法一" id="btn1">
<!--设置弹框的类型和value值以及唯一的id-->
<script>
//<!--定义一个我们想通过触发来达到的目的,这里我通过建立函数的方法来将alert的效果封装了进去-->
function f1(){
alert("这是第一种方法");
}
//定义一个obj的变量,里边存储着我们在页面文档当中找到的id为"btn1"的"目的",并且将其赋值给obj变量
var obj = document.getElementById("btn1");
//这时我们通过onclick来触发这个事件
obj.onclick=f1;
</script>
触发效果:
被触发后:
需要注意的一点时,这里最后的f1是不能添加括号的,因为我们的目的时为了在点击的时候才触发这个事件,入股哦添加了括号的话,就会变成了变相的函数的调用,在打开页面的时候就会自动的去触发这个事件。
方法二:
在方法一的基础之上对代码进行简化:
//方法二
<input type="button" value="方法二" id="btn2">
<script>
var obj=document.getElementById("btn2");
obj.onclick=function(){
alert("这是方法二");
};
</script>
实现效果和方法一类似。和方法以得区别只是将代码进行了简化,将将函数的定义放在了触发事件的后边。
方法三:
<input type="button" value="方法三" id="btn3">
<script>
document.getElementById("btn3").onclick=function(){
alert("这是方法三");
};
</script>
这个的实现方法就是在方法二的基础上,将获取到的文档后后边直接添加触发的事件,然后接着将事件的响应也直接赋值给了他们,其实也就是一个变向的代码间歇的过程吧。
方法三也是在方法二的基础上对代码进行了优化,其实说是三种方法,他们根本的编程思想还是没有变化的。
无非都是实现一个事件应该有的四个属性:
1、按钮:事件源
2、点击:事件名字
3、被点击:触发
4、弹框:事件的响应
在方法三中,只不过一次性的将这方式的后三个写在了一行上边,事件实现的基本思想还是没有改变的。
一定不要停下学习的脚步,将学习到的更多的东西分享在这里。