zoukankan      html  css  js  c++  java
  • js中的事件(下)

    1、阻止浏览器的默认行为  
      右键单击浏览器,会弹出一个菜单
      拖拽文字
      超链接 空链接--刷新   
      submit按钮 刷新页面
      阻止浏览器的默认行为 :
        e.preventDefault ? e.preventDefault() : e.returnValue=false;
     
    2、事件绑定  -- 如何为某个元素添加某个事件
      1)<input type='button' onclick = 'fn()'>
      2)obj.onclick = function(){
        }
      3)通过  addEventListener()   绑定事件   ----  事件监听 
        用法 :obj.addEventListener("事件去掉on",function(){})   
          第一个参数  事件  
          第二个参数  事件处理程序
          第三个参数  布尔值  默认  false   控制事件冒泡还是事件捕获    true -- 事件捕获
      事件监听的好处 :  可以为同一个对象添加多个同样的事件 
                     可以根据事件监听的方法确定到底是事件的冒泡还是事件捕获 
     
      了解  : ie的事件监听:  attachEvent()   不能实现捕获
        obj.attachEvent("onclick",function(){
     
        })
    3、事件冒泡和事件捕获的执行顺序(扩展)
      如果一个元素 既有事件冒泡,又有事件捕获,先捕获 后冒泡
    4、js事件委托
      事件委托 : 又叫事件代理 ,将事件添加到某些元素的父元素或者祖先元素元素上  委托父级或祖先元素完成事件操作
      事件委托机制 :js事件委托,其实是使用了冒泡的原理,从点击的元素开始,会向父元素传播事件
     
      这样做的好处
        1)对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。
        2)可以处理动态插入dom中的元素,直接绑定的方式是不行的
      获取事件源:
          target = e.target || e.srcElement
     
    5、json对象 
      json作用 : 存储数据    跨平台的数据存储格式   轻量级存储数据 --- 存储数据量小
      相对于普通的js{对象}来说,
        区别1:属性名字需要用双号号包含,
        区别2: 属性值如果是字符串那么也使用双引号。
      json数据的存和取  
        定义json : 
          var json = { "键":"值","键":"值",.... } 
        json值的获取 : 
            json对象.键 
            json对象["键"]
      json的遍历 : json没有length属性,不能用for循环遍历   只能用for...in  遍历
     
      json中的值可以是数组
            var json = {
               "url" : ["1.jpg","2.jpg"],
                "con" : ["图片一","图片二"]
            }
          for..in 中嵌套for
     
      数组中存放json : 
           [{"uname":"uname","pwd":111},{"uname":22,"pwd":22},{"uname":33,"pwd":999}]
           for 循环中嵌套for .. in
    6、拖拽
      拖拽思路 : 
          涉及的事件 --- onmousedown   onmousemove   onmouseup
      1)要想实现拖拽效果,首先要有鼠标按下事件  
        记录鼠标按下时的内部偏移量
          var disx = e.offsetX  ||  e.layerX
          var disy = e.offsetY  ||  e.layerY
      2)鼠标移动  
        设置被拖拽物体的left和top值
          left = e.pageX - disx
          top = e.pageY - disy
      3)鼠标抬起 
        取消鼠标移动事件
          document.onmousemove = null  /  ""
      获取窗口的宽度和高度:  window.innerWidth / window.innerHeight  
    7、scorll家族属性
      scrollTop : 获取页面垂直方向滚走的距离
      scrollLeft :  获取页面水平方向滚走的距离
      一般scrollTop 与 滚动条事件连用
        window.onscroll = function(){
          获取页面滚走的距离:
            document.body.scrollTop || document.documentElement.scrollTop
        }
    8、盒子模型
      offsetWidth : clientWidth + 左右border
      offsetHeight : clientHeight + 上下border
      offsetTop : 元素的外边框距离offsetParent的内边框的垂直偏移量
      offsetLeft : 元素的外边框距离offsetParent的内边框的水平偏移量
      offsetParent : dom元素的offsetParent的值是谁,取决于它的祖先元素是否有定位属性(absolute,relative,fixed)。
            如果有这个定位属性那么直接offsetParent就获取这个。否则没有定位属性,那么继续上上一级祖先元素去查找。如果查找到body的所有祖先元素都没有定位属性。直接把body获取到。
      扩展 
        clientWidth : 内容+左右padding
        clientHeight : 内容+上下padding
        clientTop : 上边框的宽度
        clientLeft : 左边框的宽度
  • 相关阅读:
    intel 蓝牙驱动安装时报错
    H310C,B365,M.2 NVME SSD,USB3.0,安装 WIN7 64 位
    C# .NET 判断输入的字符串是否只包含数字和英文字母
    squid http,https, 代理,默认端口3128
    C# .net mvc web api 返回 json 内容,过滤值为null的属性
    centos7安装python-3.5
    systemctl命令完全指南
    Centos7中systemctl命令详解
    Python if 和 for 的多种写法
    CentOS 7.0,启用iptables防火墙
  • 原文地址:https://www.cnblogs.com/ginelle/p/10239829.html
Copyright © 2011-2022 走看看