码迷,mamicode.com
首页 > Web开发 > 详细

js的事件处理程序

时间:2016-06-05 13:54:47      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

js事件处理程序一般有三种:

1、HTML事件处理程序

<body>
    <input type="button" value="点击" onclick="mes()" /> 
    <!--js-->
    <script>
       function mes(){
           document.write("hello world!");
       }
    </script>
</body>

这种事件方式一般不推荐,变更事件麻烦。

2、DOM0级处理程序

<body>
    <input type="button" value="点击" id="btn"/>
    <!--js-->
    <script>
        var btn = document.getElementById("btn");    
        btn.onclick = function(){
            document.write("hello world!");
        }
    </script>
</body>    

这里可以 = 一个匿名函数,也可以是已声明函数。

DOM0级处理程序的清空:element.onclick = null;

3、DOM2级处理程序

DOM2级处理程序定义了事件添加和事件删除两个方法。分别是:addEventListener()removeEventListner()

这两个方法都有三个参数:处理事件名(如:点击事件 click),事件处理的函数(可以是匿名函数也可以是已声明函数,这里一般用已声明函数,方便remove)布尔值(这里的值是调用事件的方式,true为事件捕获,false为事件冒泡,一般设置为事件冒泡)

添加事件:

<body>
<input type="button" value="点击" id="btn"/>
<!--js-->
<script>
var btn = document.getElementById("btn"); 
btn.addEventListener(click,function(){
  document.write("hello world!");
},false);
</script>
</body>

删除事件:

<body>
<input type="button" value="点击" id="btn"/>
<!--js-->
<script>
var btn = document.getElementById("btn"); 
btn.addEventListener(click,mes,false);
</script>
</body>

 

js的事件处理程序

标签:

原文地址:http://www.cnblogs.com/MirageFox/p/5560547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!