<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
  var EventUtil={

   addHandler:function(element,type,handler){ //添加事件
      if(element.addEventListener){
         element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
      }else if(element.attachEvent){                    //使用IE方法添加事件
         element.attachEvent("on"+type,handler);
      }else{
         element["on"+type]=handler;          //使用DOM0级方法添加事件
      }
   },

   removeHandler: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;
      }
   },

   getEvent:function(event){  //使用这个方法跨浏览器取得event对象
      return event?event:window.event;
   },

   getTarget:function(event){  //返回事件的实际目标
      return event.target||event.srcElement;
   },

   preventDefault:function(event){   //阻止事件的默认行为
      if(event.preventDefault){
         event.preventDefault();
      }else{
         event.returnValue=false;
      }
   },

   stopPropagation:function(event){  //立即停止事件在DOM中的传播
                                     //避免触发注册在document.body上面的事件处理程序
      if(event.stopPropagation){
         event.stopPropagation();
      }else{
         event.cancelBubble=true;
      }
   },

   getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素
      if(event.relatedTarget){
         return event.relatedTarget;
      }else if(event.toElement){      //兼容IE8-
         return event.toElement;
      }else if(event.formElement){
         return event.formElement;
      }else{
         return null;
      }
   },

   getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
      if(document.implementation.hasFeature("MouseEvents","2.0")){
         return event.button;
      }else{
         switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
               return 0;  //按下的是鼠标主按钮（一般是左键）
            case 2:
            case 6:
               return 2;  //按下的是中间的鼠标按钮
            case 4:
               return 1;  //鼠标次按钮（一般是右键）
         }
      }
   },

   getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
      if(event.wheelDelta){
         return event.wheelDelta;
      }else{
         return -event.detail*40;
      }
   },

   getCharCode:function(event){   //以跨浏览器取得相同的字符编码，需在keypress事件中使用
      if(typeof event.charCode=="number"){
         return event.charCode;
      }else{
         return event.keyCode;
      }
   }

};
  var CookieUtil = {
  //根据key读取cookie
      get: function (name){
           //注意对键编码
          var cookieName = encodeURIComponent(name) + "=",
              cookieStart = document.cookie.indexOf(cookieName),
              cookieValue = null,
              cookieEnd;
          //找到cookie键
          if (cookieStart > -1){
               //键后面第一个分号位置
              cookieEnd = document.cookie.indexOf(";", cookieStart);
              if (cookieEnd == -1){
                  cookieEnd = document.cookie.length;
              }
              //cookie值解码
              cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
          }
          return cookieValue;
      },
      //设置cookie
      set: function (name, value, expires, path, domain, secure) {
          var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
          //失效时间，GMT时间格式
          if (expires instanceof Date) {
              cookieText += "; expires=" + expires.toGMTString();
          }
          if (path) {
              cookieText += "; path=" + path;
          }
          if (domain) {
              cookieText += "; domain=" + domain;
          }
          if (secure) {
              cookieText += "; secure";
          }
          document.cookie = cookieText;
      },
      //删除cookie，保持相同的键、域、路径、安全选项，然后设置失效时间即可
      unset: function (name, path, domain, secure){
          this.set(name, "", new Date(0), path, domain, secure);
      }
  };
  </script>


  <p id="know0">友情提示区域1 <a href="javascript:void(0)" target="_self" id="btn-know0">不再提示</a></p>
      <p id="know1">友情提示区域2 <a href="javascript:void(0)" target="_self" id="btn-know1">不再提示</a></p>
      <input type="button" value="清除cookie" id="delete-btn" />
      <script type="text/javascript">
  var cookiekey = 'iknow',
  key0 = 'know0',
  key1 = 'know1';
  EventUtil.addHandler(window, 'load', function () {
    var know0 = CookieUtil.get(cookiekey, key0);
    if (know0) {
      document.getElementById('know0').style.display = 'none';
    }
    var know1 = CookieUtil.get(cookiekey, key1);
    if (know1) {
      document.getElementById('know1').style.display = 'none';
    }
    EventUtil.addHandler(document.getElementById('delete-btn'), 'click', function () {
      CookieUtil.unset(cookiekey, key0);
      CookieUtil.unset(cookiekey, key1);
    })
    EventUtil.addHandler(document.getElementById('btn-know0'), 'click', function () {
      CookieUtil.set(cookiekey, key0, 1);
      document.getElementById('know0').style.display = 'none';
    });
    EventUtil.addHandler(document.getElementById('btn-know1'), 'click', function () {
      CookieUtil.set(cookiekey, key1, 1);
      document.getElementById('know1').style.display = 'none';
    });
  });
      </script>

</body>
</html>
