Day15

1-列举几个常见的浏览器兼容问题

2-js 中给元素注册事件的方法有哪些？

3-js 中给元素的移除事件的方法

4-阻止冒泡的方法

5-阻止默认行为的方法

1-列举几个常见的浏览器兼容问题

1关于滚动条出现的兼容性问题

Chrome 认为滚动条是body的可以通过body.scrollTop 来获取
火狐等浏览器认为滚动条是HTML的；
兼容性写法；
var st = document.body.scrollTop ||document.documentElement.scrollTop;

2.事件监听；

添加事件监听器：addEventListener(事件名，处理函数，布尔值)
移除事件监听器：removeEventLisener(事件名，处理函数)；

注意：事件名不带 on 处理函数为函数指针，布尔值表示冒泡或捕获默认false 为冒泡；如果布尔值是true 就是捕获；

IE下的事件监听器：attachEvent(事件名，处理函数)，detachEvent(事件名，处理函数)

注意：事件名带on 默认冒泡支持捕获；

详细

2-js 中给元素注册事件的方法有哪些？

　　一、js中常用事件之onclick事件

  document.getElementById("btn2").οnclick=function () {
        alert("这也可以的");
    };

//一般涉及到大量代码的时候:多个元素都要注册相同的事件的时候
    document.getElementById("btn3").οnclick=f2;
    function f2() {
        alert("这也是可以的");
    }

　　二、js中常用事件之onload事件，页面一开始加载的时候会先调用这个方

　　三、js中常用事件之onchange事件，当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。

　　onblur事件：元素失去焦点

　　onfocus事件：得到焦点事件

　　onscroll事件窗口滚动事件：当页面滚动时调用函数

　　onmouseover:鼠标移动到某对象范围的上方时

　　onmouseout:鼠标离开某对象范围时，触发事件调用函数。

　　onmousemove:鼠标移动到某对象范围的上方时，触发事件调用函数。

　　onmouseup:当鼠标松开时触发事件

　　onmousedown:当鼠标按下键时触发事件

实例

3-js 中给元素的移除事件的方法

code 1103-ch08

// 事件绑定兼容处理
    function addMulEvent(element,type,fn){
      if(element.addEventListener){
        element.addEventListener(type,fn,false)
      }
      else if(element.attachEvent){
        element.attachEvent("on"+type,fn)
      }
      else{
        element["on"+type] = fn
      }
    }

    // 解绑事件兼容处理
    function removeEvent(element,type,fnName){
      // 浏览器兼容性
      if(element.removeEventListener){
        element.removeEventListener(type,fnName,false)
      }
      else if(element.detachEvent){
        element.detachEvent("on"+type,fnName)
      }
      else{
        element["on"+type] = null
      }
    }

4-阻止冒泡的方法

　　事件有三个阶段：

      1-事件的捕获阶段：从外向里
      2-时间目标阶段：
      3-事件冒泡阶段：从里向外

      对象.addEventListener("事件类型",事件处理函数,false)
 
 // 阻止冒泡
    // window.event.cancelBubble = true IE特有的，谷歌火狐不支持
    // e.stopPropagation() 谷歌火狐支持

  function cancelMp(e){
      if(e.stopPropagation){
        e.stopPropagation()
      }
      else{
        window.event.cancelBubble()
      }
    }

5-阻止默认行为的方法

//阻止浏览器默认行为触发的通用方法 
    function stopDefault(e) {
        if (e && e.preventDefault) {
            e.preventDefault();//防止浏览器默认行为(W3C) 
        } else {
           window.event.returnValue = false;//IE中阻止浏览器行为 
        }
        return false;
    }

详细介绍

// 事件绑定兼容处理
    function addMulEvent(element,type,fn){
      if(element.addEventListener){
        element.addEventListener(type,fn,false)
      }
      else if(element.attachEvent){
        element.attachEvent("on"+type,fn)
      }
      else{
        element["on"+type] = fn
      }
    }

    // 解绑事件兼容处理
    function removeEvent(element,type,fnName){
      // 浏览器兼容性
      if(element.removeEventListener){
        element.removeEventListener(type,fnName,false)
      }
      else if(element.detachEvent){
        element.detachEvent("on"+type,fnName)
      }
      else{
        element["on"+type] = null
      }
    }

posted @ 2021-02-26 09:47 =小王= 阅读(46) 评论(0) 编辑收藏举报

刷新页面返回顶部

=王远=

Day15

1关于滚动条出现的兼容性问题

2.事件监听；

公告