JavaScript中DOM事件对象

最新推荐文章于 2024-04-26 16:47:03 发布

仙鹤__

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量712

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130468041

版权

1.1.1 DOM事件对象

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

事件分鼠标事件、表单事件、键盘事件

鼠标事件

通过鼠标事件，触发调用函数，实现功能：鼠标移入到盒子中盒子的背景色为粉色；鼠标移出到盒子中盒子的背景色为蓝色。

<style>
    #box{
        width: 300px;
        height: 300px;
        outline:1px dashed red;
    }
</style>

<div id="box" onmouseover="fun1()" onmouseout="fun2()">

</div>

var box=document.querySelector('#box')
function fun1(){
box.style.backgroundColor='pink'
}
function fun2(){
box.style.backgroundColor='red'
}

或一种写法，如下所示：

#box{
        width: 300px;
        height: 300px;
        outline:1px dashed red;
    }

 <div id="box" ></div>

var box=document.querySelector('#box')
box.document.backgroundColor='pink'
}
box.document.backgroundColor='red'

预览：

1.1.1.1 事件对象event和事件冒泡、事件捕获、事件委托

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

点击document文档，获取事件对象event

document.ondblclick=function(){
var ev=ev||event;
console.log(ev)
}

或者这样写：

document.onclick=function(){
console.log(event)

document.onclick=function(e){
console.log(e)
}

预览：

event中常用的属性

ev.clientX ---- cliectX 事件发生时，鼠标距离可视区域的X距离。

ev.clientY ---- cliectY 事件发生时，鼠标距离可视区域的Y距离。两者都是event对象的属性。

event.pageX、event.pageY（整个HTML文档中的绝对定位）

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.screenX、event.screenY（不常用）

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性(就是上面的地址栏，收藏夹都会算进去)

让一个元素随鼠标的移动而移动

.box{
        width: 20px;
        height: 20px;
        background-color: red;
        position:absolute;
        top:0;
        left:0;
    }

<div class="box" id="box">
</div>

var box=document.querySelector('#box')
document.onmousemove=function(event){
console.log(event)
var cs=event.clientX;
var cy=event.clientY;
box.style.left=cx+"px";
box.style.top=cy+"px";
}

预览：

event.offsetX、event.offsetY（相对事件发生的具体元素左上角的定位）

event.layerX、event.offsetX、clientX在取值上是一样的

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

JavaScript实现放大镜效果

*{
        padding: 0;
        margin: 0;
    }
    #left{
        float:left;
        width: 400px;
        height: 400px;
        background: url(./img/pic400.jpg) no-repeat ;
        position:relative;
    }
    #cover{
        width: 400px;
        height: 400px;
         /* 绝对定位 */
        position:absolute;
        left:0;
        top:0;
        outline:2px dashed red;
    }
    #kuai{
        width: 200px;
        height: 200px;
        background-color: white;
        opacity:0.5;
        /* 绝对定位 */
        position:absolute;
        left:0;
        top:0;
        display: none;
    }
    #right{
        float:left;
        width: 400px;
        height: 400px;
        overflow: hidden;
        margin-left:20px;
        position:relative;
        display: none;
    }
    #right img{
        position:absolute;
        left:0;
        top:0;
    }

 <div id="left">
        <div id="kuai"></div>
        <div id="cover"></div>
    </div>
    <div id="right">
        <img id="img" src="./img/pic800.jpg" alt="">
    </div>

//放大镜效果
window.onload=function(){
//1.抓取元素
var left=document.querySelector('#left')
var kuai=document.querySelector('#kuai')
 var cover=document.querySelector('#cover')
 var right=document.querySelector('#right')
 var img=document.querySelector('#img')
 console.log(left,kuai,cover,right,img)
 
 //2.事件绑定
 cover.onmouseover=function(){
   //（1）让块显示出来，右侧盒子显示出来
   kuai.style.display='block'
   right.style.display='block'
   //（2）获取event事件对象，从事件对象中去获取属性用
   console.log(event);
   var l=event.layerX || event.offsetX;
   var t=event.layerY || event.offsetY;
   
 }
document.title=l+ '|' +t
   //块的坐标(把 相减的结果，给块去使用，作为块的坐标)
   var k_l=l-100;
   var k_t=t-100;
   
     //设置临界点
     if(k_l<0){
     k_l=0;
     }
     if(k_l>200){
     k_l=200;
     }
     if(k_t>200){
     k_t=200;
     }
     kuai.style.left=k_l+'px';
     kuai.style.top=k_t+'px';
     //大图的坐标
     var img_l=k_l *-2;
     var img_t=k_t *-2;
     //给大图设置新的样式
     img.style.left=img_l+'px';
     img.style.top=img_t+'px';
     }
  }

预览：

JavaScript实现Tab栏切换

 <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
   
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
   
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>

<style>
    *{
        padding: 0;
        margin: 0;
    }

    .box{
        width: 500px;
        height: 200px;
        border: 1px solid #ccc;
        margin: 50px auto;
        overflow: hidden;
    }

    ul{
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style: none;
    }

    li{
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsun";
        background-color: pink;
        cursor: pointer;
    }

    span{
        display: none;
        width: 500px;
        height: 160px;
        background-color: yellow;
        text-align: center;
        font: 700 100px/160px "simsun";
    }

    .show{
        display: block;
    }

    .current{
        background-color: yellow;
    }
</style>

window.onload=function(){
//抓取元素
var boxs=document.getElementsByClassName('box')
}
//对这三个盒子进行遍历
for(var i=0;i<boxs.length;i++){
fn(boxs[i]);
}
function fn(element){
console.log(element);
//抓取元素
//抓取每个盒子自身里面的li和span
var liArr=element.getElementsByTagName('li')
var spanArr=element.getElementsByTagName('span')
 //触碰到每个li的时候，让li下面对应的span显示出来
//遍历
for(var i=0;i<liArr.length;i++){
//给当前li对象上添加一个index属性，i赋值到index属性上
liArr[i].index=i;
liArr[i].onmouseover=function(){
console.log(this.index);
//遍历
 //（1）先把所有的li身上的类去掉
 //(3)把span身上的类去掉
 for(var j=0;j<liArr.length;j++){
 liArr[j].className="";
 spanArr[j].className="";
 }
   //（2）让当前的li高亮显示
}
this.className="current"
//(4)让当前的span显示出来
spanArr[this.index].className='show'
      }
    }
  }
}

预览：

仙鹤__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中DOM事件对象

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。event.offsetX、event.offsetY（相对事件发生的具体元素左上角的定位）ev.clientX ---- cliectX 事件发生时，鼠标距离可视区域的X距离。1.1.1.1 事件对象event和事件冒泡、事件捕获、事件委托。事件分鼠标事件、表单事件、键盘事件。
复制链接

扫一扫