首页 > Web开发 > 详细

js中的事件处理方法

时间:2017-02-28 17:20:40      阅读:129      评论:0      收藏:0      [点我收藏+]

第一种:HTML事件处理程序

  即将事件直接添加到HTML结构里

<div>
    <input type="button" value="按钮" onclick="showMessage()">
</div>
<script>
    function showMessage(){
        alert("hello world");
    }
</script>

这种方式是比较容易理解,但是缺点也很明显:HTML和JS代码紧密的耦合在一起,想修改的话需要同时要改html和js两部分的内容。

第二种:DOM0级事件处理

  即 把一个函数赋值给一个事件处理程序属性。是一种用的比较多的方法,具有简单,跨浏览器等特点。

<div>
    <input type="button" id="btn" value="按钮" onclick="showMessage()">
</div>
<script>
    var btn=document.getELementById(‘btn‘);
    btn.onclick=function(){
        alert("hello world");
    }
btn.onclick=null;//删除onclick属性
</script>

第三种 DOM2级事件处理

DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListner()。这这两个方法接受三个参数:要处理的事件名,作为事件处理程序的函数和函数的布尔值(true表示在事件捕获阶段处理事件程序,false则对应事件冒泡,默认是false).

<div>
    <input type="button" id=“btn” value="按钮" >
</div>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener(‘click‘,showMessage,false);
  btn.addEventListener(‘click‘,showOther,false);
  function showMessage(){ alert("hello world"); }
  function showOther(){ alert("other"); }

  btn.removeEventListener(‘click‘,showMessage,false);
</script>

注意:通过addEventListener添加的事件只能通过removeEventListener来删除,同时这两个函数的接受的事件名是需要去掉“on”的。通过DOM0级和DOM2级事件处理可以给给元素添加多个事件处理程序和多个事件。这些添加的事件按照其调用的先后顺序执行。

第四种 IE事件处理程序

提供了两个方法:attachEvent()添加事件和detachEvent()删除事件,接受两个参数:事件处理的程序的名称(不去掉"on"),事件处理程序的函数 IE8及以前的浏览器只支持事件冒泡。

<div>
    <input type="button" id=“btn” value="按钮" >
</div>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent(‘onclick‘,showMessage,false);
  function showMessage(){ alert("hello world"); }
</script>

事件处理兼容低版本IE浏览器问题解决:新建一个对象event,给该对象添加一个addEvent方法,在该方法里对浏览器进行能力检测(支持哪种事件处理方式就用哪种),删除事件同理。

  <input type="button" id="btn" value="按钮">
    <script>
        var btn=document.getElementById(‘btn‘);
        function showMessage(){
            alert(‘hello dq‘);
        }
        var event={
            addevent:function(element,type,handle){
                if(element.addEventListener){
                    element.addEventListener(type,handle,false);
                }else if(element.attachEvent){
                    element.attachEvent(‘on‘+type,handle);
                }else{
                    elememt[‘on‘+type]=handle;
                }
            }
        }
        event.addevent(btn,‘click‘,showMessage);
    </script>

js中的事件处理方法

原文:http://www.cnblogs.com/hongf/p/6478969.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!