欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js--事件对象(keyCode、target)、js三大特效(offset、scroll、client)

程序员文章站 2024-03-15 14:23:47
...

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

 

Ie9以下浏览器中的事件对象是放在全局中的window.event;

解决兼容性:event = event || window.event

js--事件对象(keyCode、target)、js三大特效(offset、scroll、client)

screenX、pageX和clientX的区别

js--事件对象(keyCode、target)、js三大特效(offset、scroll、client)

 

PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。(页面)

ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。(屏幕)

clientX/clientY: 内容可视区域鼠标位于浏览器的左侧和顶部的距离。(浏览器大小和位置)

 

 PageY和pageX的兼容写法(很重要)

在页面位置就等于 = 看得见的+看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

 

1. event.target属性;返回触发此事件的元素(事件的目标节点)。

重要作用:事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变,例:点击子级元素时子级发生样式改变):

event.target.style=''(点击的目标对象)

2. event.currentTarget属性;  返回其事件监听器触发该事件的元素。

3. event.type属性; 返回当前 Event 对象表示的事件的名称。

4.event.timeStamp属性; 返回事件生成的日期和时间。

1-4案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div class="box" id="box" onclick="targett(event)">
    <p>我爱https://blog.csdn.net/muzidigbig</p>
    <p>我爱https://blog.csdn.net/muzidigbig</p>
</div>
</body>
<script>
    function targett(event) {
//        解决IE9兼容性问题
        event = event || window.event;
        //返回触发此事件的元素(事件的目标节点)。
        console.log(event.target);
//        console.log(event.target.id);
//        console.log(event.target.tagName);
//        console.log(event.target.nodeName);
//        console.log(event.target.className);
//        console.log(event.target.innerHTML);
//        console.log(event.target.innerText);
        //事件委托(点击子级元素,相对应的样式发生改变)
        event.target.style.color='yellow';
        //返回其事件监听器触发该事件的元素。
        console.log(event.currentTarget);
        //返回当前 Event 对象表示的事件的名称。
        console.log(event.type);
        //返回事件生成的日期和时间。
        console.log(event.timeStamp);
    }
</script>
</html>

5. event.keyCode ;   键盘按键代码(返回值number)和keydown/keyup(事件会在键盘按下/松开时触发)配合使用

上下左右案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        .bc{
            background-color: pink;
        }
    </style>
</head>
<body>
<table>创建一个十行十列的表格,代码略……</table>
</body>
<script>
    window.onload = function () {
        dig();
        function dig() {
            //这里将随机数作为获取对象的索引;注意这里定义在全局位置的变量
            var random = Math.round(Math.random()*100);
            console.log(random);
            var tds = document.getElementsByTagName('td');
            tds[random].className='bc';
            //键盘按键事件
            document.onkeydown = function (event) {
                if(event.keyCode == 38){
                    tds[random].className='';
                    random -= 10;
                    if(random>1 ){
                        tds[random].className='bc';
                    }else{
                        //这里用到了递归
                        dig();
                    }
                }else if(event.keyCode == 40){
                    tds[random].className='';
                    random += 10;
                    if(random<99){
                        tds[random].className='bc';
                    }else{
                        dig();
                    }
                }else if(event.keyCode == 37){
                    tds[random].className = '';
                    random -= 1;
                    if(random>0 || random==0){
                        tds[random].className = 'bc';
                    }else {
                        dig();
                    }
                }else if(event.keyCode == 39){
                    tds[random].className = '';
                    random += 1;
                    if(random < 99 || random == 99){
                        tds[random].className = 'bc';
                    }else{
                        dig()
                    }
                }
            }
        }
    }
</script>
</html>

 

js--三大特效(重点重点)

三大家族和一个事件对象

    三大家族(offset/scroll/client)

    事件对象/event   (事件被触动时,鼠标和键盘的状态)(通过属性控制)

1. offset家族 (返回值为number)

    offset这个单词本身是--偏移,补偿,位移的意思。

    js中有一套方便的获取元素尺寸的办法就是offset家族;

    offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent共同组成了offset家族。

offsetWidth和offsetHight (检测盒子自身宽高+padding+border)

    这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。

    offset宽/高  =  盒子自身的宽/高 + padding+border;(不包含margin)

    offsetWidth =width+padding+border;

    offsetHeight =Height+padding+border;

offsetLeft和offsetTop  (元素的left/top距离父盒子有定位的左/上面的距离)

返回距离上级盒子(带有定位)左边的位置

如果父级都没有定位则以body为准

offsetLeft 从父亲的padding 开始算,父亲的border 不算。

在父盒子有定位的情况下,offsetLeft == style.left(去掉px)

offsetParent(检测父系盒子中带有定位的父盒子节点)

1、返回该对象的父级 (带有定位)

          如果当前元素的父级元素没有进行CSS定位  (position为absolute或relative,fixed), offsetParent为body元素。

2、如果当前元素的父级元素中有CSS定位 (position为absolute或relative,fixed),offsetParent取最近的那个父级元素。

 

offsetLeft和style.left区别:

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置;而 style.left不可以。

二、offsetTop 返回的是数字,而 style.top 返回的是字符串;除了数字外还带有单位:px。

三、offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)

四、如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。

js--事件对象(keyCode、target)、js三大特效(offset、scroll、client)

案例:匀速动画

动画原理:定时器+盒子本身的位置+步长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            background-color: pink;
            position: relative;
        }
    </style>
</head>
<body>
<button onclick="speed()">匀速动画</button>
<div>
    https://blog.csdn.net/muzidigbig
</div>
</body>
<script>
    function speed() {
        var btn = document.getElementsByTagName('button')[0];
        var div = document.getElementsByTagName('div')[0];
        function bian() {
            //动画原理:盒子未来的位置 = 盒子现在的位置+步长
            //用offsetLeft属性获取定位的盒子距离body左边的距离改变这个距离
            //将offsetLeft重新设置的值赋给style.left
            //offset获取值的返回类型为number
            div.style.left = div.offsetLeft+10+'px';
        }
        setInterval(bian,2000);
    }
</script>
</html>

2.scroll家族组成(卷页)

scrollWidth和scrollHeight(不包括border、margin)

    检测盒子的宽高。(调用者:节点元素。属性。)

    盒子内容的宽高。(如果有内容超出了,显示内容的高度;不超出是盒子本身的高度)

    IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小

    IE8一下不超出盒子,高为内容的高度

scrollToph和scrollLeft(与onscroll滚动事件配合)

网页,被浏览器遮挡的头部和左边部分。

被卷去的头部和左边部分。

js--事件对象(keyCode、target)、js三大特效(offset、scroll、client)

它的兼容性问题

一、未声明 DTD(谷歌只认识他)

    document.body.scrollTop

二、已经声明DTD(IE678只认识他)

   document.documentElement.scrollTop

三、火狐/谷歌/ie9+以上支持的

   window.pageYOffset

兼容性写法

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;

案例:

固定导航栏

<script>
    window.onload = function () {
    //需求1:当我们滚动界面的时候,被卷曲的头部超过第二个盒子距离顶部的位置,那么直接给第二个盒子加类名.fixed
    //需求2:当我们滚动界面的时候,被卷曲的头部小于第二个盒子距离顶部的位置,那么直接给第二个盒子取消类名.fixed
    //步骤:
    //1.老三步。
    //2.判断 ,被卷曲的头部的大小
    //3.满足条件添加类,否则删除类

        //1.老三步。
        var topDiv = document.getElementById("top");
        var height = topDiv.offsetHeight;
        var middle = document.getElementById("Q-nav1");
        var main = document.getElementById("main");
        window.onscroll = function () {
            //2.判断 ,被卷曲的头部的大小
            if(scroll().top > height){
                //3.满足条件添加类,否则删除类
                middle.className += " fixed";
                //第二个盒子不占位置了,所以我们给第三个盒子一个上padding占位置,不出现盒子抖动问题
                main.style.paddingTop = middle.offsetHeight+"px";
            }else{
                middle.className = "";
                //清零
                main.style.paddingTop = 0;
            }
        }
    }
</script>

3.client 家族

client 可视区域

clientWidth: width + padding 不包含borde

检测屏幕宽度(可视区域)

ie9及其以上的版本

window.innerWidth 

标准模式

document.documentElement.clientWidth

怪异模式

document.body.clientWidth

window.onresize = function(){}  窗口改变事件

onresize 事件会在窗口或框架被调整大小时发生

案例:

<script>
    function client() {
        if(window.innerWidth != null) // ie9 + 最新浏览器
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat") // 标准浏览器
            {
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
            return { // 怪异浏览器
                width: document.body.clientWidth,
                height: document.body.clientHeight
        }
    }
    document.write(client().width); 
</script>

 

 

若有不足请多多指教!希望给您带来帮助!