DOM来实现一个简单的事件的demo

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、弹框：事件的响应

 

在方法三中，只不过一次性的将这方式的后三个写在了一行上边，事件实现的基本思想还是没有改变的。

 

一定不要停下学习的脚步，将学习到的更多的东西分享在这里。