zoukankan      html  css  js  c++  java
  • javascript 事件处理

    js事件处理的方式有三种:

    1.HTML事件处理

    <input type="button" value="click me" onclick="alert("Clicked");"/>

    2.DOM0级事件处理

    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
      alert("Clicked");  
    }

    3.DOM2级事件处理

    var btn=document.getElementById("myBtn");
    btn.addEventListener("click",function()){
        alert(this.id);
    },false);
    //false 表示在冒泡阶段调用时间处理函数,如果是true,表示在捕获阶段调用事件处理程序。

    4.IE事件处理

    IE8及IE8以前的版本只支持事件冒泡。

    var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function()){
        alert(this === windown); //true 跨浏览器编程时,要牢记这一区别。
    },false);

    5.跨浏览器的事件处理

    var EventUtil = {
        addHandle:function(element, type, handler){
            if(element.addEventListener){
                element.addEventListener(type, handler, false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type, handler);
            }else{
                element["on"+type] = handler;
            }
        },
        removeHandle:  function(element, type, handler){
            if(element.removeEventListener){
                element.removeEventListener(type, handler, false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type, handler);
            }else{
                element["on"+type] = null;
            }
        }
    }
  • 相关阅读:
    解决GIT可视化工具Sourcetree拉取失败问题
    记录常用Git命令
    vue开发移动端使用rem的适配方案
    使用HBuilderX实现打包vue项目成app
    使用vue+webpack从零搭建项目
    整理最近面试问道的问题
    模块化之seaJs学习和使用
    理解Object.defineProperty的作用
    vue生命周期
    使用gulp编译sass
  • 原文地址:https://www.cnblogs.com/zhutianpeng/p/4216504.html
Copyright © 2011-2022 走看看