码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript事件处理程序

时间:2018-06-15 12:50:28      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:参数   处理   btn   targe   str   pre   rip   mes   handle   

JavaScript中的事件处理程序主要分为3种:

  • HTML事件处理程序:

技术分享图片
    <script type="text/javascript">
    // HTML事件处理程序
    function showMessage(){
        alert("clicked!");
    };
    </script>

<button id="btn" onclick="showMessage()">click me!</button>
技术分享图片
  • DOM0级事件处理程序:  

技术分享图片
<button id="btn">click me!</button>

    <script type="text/javascript">
    var btn = document.getElementById("btn");
    
    // DOM0 级事件处理程序
    btn.onclick = function(){
        alert("clicked!");
    };
    </script>
技术分享图片
  • DOM2级事件处理程序:

技术分享图片
<button id="btn">click me!</button>

    <script type="text/javascript">
    var btn = document.getElementById("btn");
    
    // DOM2级事件处理程序, 第三个参数:false表示在冒泡阶段调用事件处理程序
    btn.addEventListener("click", function(){
        alert("clicked!");
    }, false);
    </script>
技术分享图片

  

附上兼容性事件绑定函数:

技术分享图片
function listenEvent(eventTarget, eventType, eventHandler){
    if(eventTarget.addEventListener){
        eventTarget.addEventListener(eventType, eventHandler, false);
    }
    else if(eventTarget.attachEvent){
        eventType = ‘on‘ + eventType;
        eventTarget.attachEvent(eventType, eventHandler);
    }
    else{
        eventTarget[‘on‘ + eventType] = eventHandler;
    }
}
技术分享图片

 

JavaScript事件处理程序

标签:参数   处理   btn   targe   str   pre   rip   mes   handle   

原文地址:https://www.cnblogs.com/magic-xxj/p/9186394.html

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