您的位置: 首页  >  文章  >  js事件总结

js事件总结

分类: 文章 • 2023-12-12 10:40:16

事件的定义：
事件就是给浏览器定义一个预处理函数，当事件触发的时候执行函数。
事件的写法：
W3C标准：事件写在行内。但是因为结构和行为要分离，一般用javascript的方法来绑定事件。只有在极少数的情况下。才将时间写在行内。
三中事件绑定方法：

  1. 行内：一般不使用
    写法：
    <标签 on+事件句柄 = “function（）{}”></标签>

  2. 给对象绑定事件 属于DOM0级事件处理，是一种赋值方式，被所有浏览器所支持
    写法;：浏览器节点（对象）.on+事件句柄 = fuction(){事件发生时要执行的代码}一般使用在一对一的事件
    js事件总结

  3. 给对象添加监听事件 属于DOM2级事件处理是所有DOM节点中的方法，可以重复监听，但是浏览器有兼容问题
    写法：
    写法：//DOM2级
    if(window.attachEvent){
    oDiv.attachEvent(“onclick”, function(){ … }); // IE只有冒泡阶段,所以没有第三个参数，而且需要加on；
    }else{
    oDiv.addEventListener( “click”, function(){ … },false); // false指冒泡阶段
    }
    js事件总结
    事件分类
    鼠标事件：
    click，dblclick， mousedown，mouseup，mouseover，mouseout（在进入子元素的时候也会触发）, mouseenter mouseleave, scroll ， mousewheel（鼠标滚轮，contentmenu （鼠标右键）
    键盘事件：
    只有三种：keyup,keydown , keypress普通的对象不能调用
    表单事件：
    onchange：当表单发生改变时触发
    onsubmit：表单提交时触发
    oninput：input标签改变时触发
    js事件总结
    注意：onchange事件和oninput事件的区别onchangge事件要在失去焦点时才触发，oninput只要改变就触发
    事件委托：
    定义：如果有多个元素需要同一个事件，不需要每个元素都来调用事件，用事件委托。
    原理：利用事件冒泡
    判断事件源： e.target || e.srcElement
    js事件总结
    事件流：
    定义：当子级被触发事件时，父级也会被触发
    事件流的过程：捕获阶段（从document到事件源） 目标阶段 冒泡阶段（从事件源到父级到document）。
    一个完整事件包含 捕获阶段 —> 目标阶段 —>冒泡阶段
    js事件总结
    阻止冒泡：
    e.stopPropagation( );
    e.cancelBubble=true;//兼容IE
    事件对象e
    鼠标事件对象e的常见属性：
    e.buttons：
    返回鼠标点击按键（1左键，2右键，4中键滚轮）
    e.offsetX / offsetY
    获取事件触发最近的盒子（事件源）的坐标
    e.clientX / clientY
    获取可视区的坐标（根据浏览器的定位）
    e.screenX / screenY
    获取整个屏幕的坐标
    e.screenX / screenY
    获取整个屏幕的坐标
    附坐标相关：
    1.浏览器的宽高
    Width:document.documentElement.clientWidth||document.body.clientWidth,
    height:document.documentElement.clientHeight||document.body.clientHeight

    1. 浏览器滚动条滚动高度
      Var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

  4. DOM尺寸
    box.style.width / box.style.height：内联
    box.clientWidth / box.clientHeight：不包含边框的宽高
    box.offsetWidth / box.offsetHeight：包含边框的宽高
    box.scrollWidth / box.scrollHeight：有滚动条的宽高

  5. 位置
    box.clientLeft / box.clientTop：边框宽度
    box.offsetLeft / box.offsetTop：相对于有定位的父元素的高度和宽度，两边边框不计
    box.scrollTop / box.scrollLeft：滚动内容上方 超出显示区域的高度或宽度

  6. 让滚动条在最底部
    box.scrollTop = box.scrollHeight - box.clientHeight
    js事件总结
    键盘事件常见属性：
    e.keyCode：
    返回键盘对应的键码 有兼容问题
    var code = e.keyCode || e.which
    e.altKey/ ctrlKey/ shiftKey：
    ctrl alt shift键返回布尔值 可以做组合键盘事件
    e.target：
    返回事件源（即返回点击的最小元素） 有兼容问题 var target = e.target || e.srcElement;
    事件对象兼容问题：
    e的兼容问题：e = e || widow.event

相关推荐