6.js事件

neverSettle姜
124 阅读3分钟

Event对象

  • 只要事件发生就会产生一个event事件
  • 事件发生后创建对象
  • Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
  • 事件通常与函数结合使用，函数不会在事件发生前被执行

鼠标事件

事件说明
onclick鼠标点击某个对象
ondblclick鼠标双击某个对象
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开
onmousemove鼠标被移动
onmousedown某个鼠标按键被按下
onmouseup某个鼠标按键被松开

onmouseenter 和 onmouseover的区别

键盘事件

事件说明
onkeypress[使用的比较少]键盘的某个键被按下
onkeydown键盘的某个键被按下或按住
onkeyup键盘的某个键被松开

光标事件

事件说明
onfocus元素获得焦点
onblur元素失去焦点

表单事件

事件说明
onsubmit提交按钮被点击
onreset重置按钮被点击
onselect文本内容被选定
onchange用户改变表单元素的内容

加载事件

事件说明
onload页面或图像加载完成

滚动事件

事件说明
onscroll窗口发生滚动

  1. 文档可视区域高度(屏幕的高度) document.documentElement.clientHeight

  2. 文档高度(整个html页面的高度) document.documentElement.scrollHeight

  3. 文档滚动高度(火狐|IE有效) document.documentElement.scrollTop

  4. 文档滚动高度(360有效) document.body.scrollTop

  5. 获得当前坐标的X，Y坐标 x=event.clientX; Y=event.clientY

  6. 获取当前元素的宽度和高度,定位的left和top height=ele.offsetHeight;

    width=ele.offsetWidth ​ left = offsetLeft

    top = offsetTop

案例：淘宝首页，点击按钮返回顶部

body{
    height: 3000px;
}
div{
            padding: 20px 3px;
            background-color: pink;
            position: fixed;
            right: 10px;
            bottom: 10px;
            display: none;
}
​
<body>
    <div id='box'>返回顶部</div>
</body>
​
<script>
    var oBox= document.getElementById('box');
    window.onscroll=function(){
        var top = document.documentElement.scrollTop||document.body.scrollTop;
        if(top>=200){
            oBox.style.display = 'block';
        }else{
            oBox.style.display = 'none';
        }
        oBox.onclick=function(){
            setInterval(goTop,10)
        }
        function goTop(){
            var top = document.documentElement.scrollTop||document.body.scrollTop;
            if(top>0){
                top -= 50;
                document.documentElement.scrollTop = top;
            }
        }
    }
</script>

案例二：使用滚动实现滚动到淘宝指定位置，显示搜索框

DOM CSS动态样式

动态样式

  • 动态样式指通过脚本动态控制元素的样式，实现页面显示格式的动态变化。比如：动态滚动的文本、动态移动的图片、可折叠的树形菜单等。

使用style对象访问样式

  • 每个HTML标记均具有style属性，相应的，JavaScript脚本中的HTML元素对象都具有style属性，该属性是一个style对象。
  • Style对象的属性与CSS样式中的属性一一对应。

元素对象.className="类名"

  • 因为属性名class在JS中为关键字，所在此处写做className
var box = document.getElementById("box");
box.style.color="#ff0000";
box.style.width="400px";
box.style.height="300px";

读取元素对象样式属性

  • 例如：var color = box.style.color
  • 注意：在读取元素样式属性时，style对象只能读取行内样式设置的属性或元素对象设置的属性，对于内嵌样式和外联样式，将返回空值。

CSS属性与style对象属性的转换

  • Style对象中的属性与CSS样式表中属性是一一对应的，但名称不一样。
  • 当属性名为单个单词时，style对象的属性名与样式表中的属性名称是相同的
  • 当属性名由多个单词组成时，除第一个单词外，其它单词的首字母大写
  • 属性值需要用引号引起来
var box = document.getElementById("box");
box.style.backgroundColor="#ff0000";
box.style.border="1px solid #f00";
box.style.height="300px";
avatar
文章
阅读
粉丝