Day15

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编辑  收藏  举报