32js学习第十五天DOM鼠标点击事件

最新推荐文章于 2024-04-11 23:56:42 发布
最新推荐文章于 2024-04-11 23:56:42 发布
阅读量347 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyaoshun123456/article/details/124458027
版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>01DOM的鼠标事件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 100px;
            line-height: 100px;
            background: yellow;
            color: #fff;
            text-align: center;
            font-size: 25px;
            margin: 10px auto;
        }
        .min{
           width: 150px;
           height: 70px;
           background: pink;
           margin: 0 auto;
           font-size: 15px; 
        }
    </style>
</head>

<body>
    <h1>01DOM的鼠标事件</h1>
    <div id="wrap">
        <div class="box">onclick</div>
        <div class="box">ondblclick</div>
        <div class="box">onmousedown</div>
        <div class="box">onmouseup</div>
        <div class="box">
            <div class="min">onmouseover</div>
        </div>
        <div class="box">
            <div class="min">onmouseout</div>
        </div>
        <div class="box">
            <div class="min">onmouseenter</div>
        </div>
        <div class="box">
            <div class="min">onmouseleave</div>
        </div>
        <div class="box">onmousemove</div>
        <div class="box">onmousewheel</div>
        <div class="box">onwheel</div>
        <div class="box">oncontextmenu</div>
    </div>
</body>
<script>
    // 01DOM的鼠标事件

    // 获取元素
    var aBox = document.getElementsByClassName("box");

    // onclick  当用户点击某个对象是调用的事件句柄  左键单击
    aBox[0].onclick = function (event) {
        console.log("onclick事件");
        console.log(event);
    }

    // ondblclick  当用户双击某个对象是调用的事件句柄  左键双击
    aBox[1].ondblclick = function (event) {
        console.log("ondblclick事件");
        console.log(event);
    }

    // onmousedown  鼠标按钮被按下
    aBox[2].onmousedown = function (event) {
        console.log("onmousedown事件");
        console.log(event.which);
    }

    // onmouseup  鼠标按钮被松开
    aBox[3].onmouseup = function (event) {
        console.log("onmouseup事件");
        console.log(event);
    }

    // 鼠标的移动事件
    // onmouseover  鼠标指针移入到某个元素上   进入到子元素会触发
    aBox[4].onmouseover = function (event) {
        console.log("onmouseover事件");
        console.log(event);
    }
    // onmouseout  鼠标指针从某个元素上移出   进入到子元素会触发
    aBox[5].onmouseout = function (event) {
        console.log("onmouseout事件");
        console.log(event);
    }

    // onmouseenter  鼠标指针移入到某个元素上  
    aBox[6].onmouseenter = function (event) {
        console.log("onmouseenter事件");
        console.log(event);
    }
    // onmouseleave  鼠标指针从某个元素上移出  
    aBox[7].onmouseleave = function (event) {
        console.log("onmouseleave事件");
        console.log(event);
    }

    // onmousemove  鼠标指针在某个元素上移动  
    aBox[8].onmousemove = function (event) {
        console.log("onmousemove事件");
        console.log(event);
    }

    // onmousewheel  鼠标滚轮事件   已废弃  使用onwheel替换
    aBox[9].onmousewheel = function (event) {
        console.log("onmousewheel事件");
        console.log(event);
    }

    // onwheel  鼠标滚轮事件 
    aBox[10].onwheel = function (event) {
        console.log("onwheel事件");
        console.log(event);
    }

    // oncontextmenu  当用户点击鼠标右键打开上下文菜单时触发
    aBox[11].oncontextmenu = function (event) {
        console.log("oncontextmenu事件");
        console.log(event);
    }

</script>

</html>

liuyaoshun123456
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第十五课 事件1
08-03
1.内联事件 2.DOM 元素分配事件 3.DOM 元素绑定事件 1.鼠标事件对象 2.键盘事件对象 3.事件对象通用属性与方法 1.IE 内核的浏览器 2.W
JavaScript 权威指南（第四版）.pdf
10-12
　第15章 脚本化文档361 　15.1 DOM概览362 　15.2 选取文档元素364 　15.3 文档结构和遍历371 　15.4 属性375 　15.5 元素的内容378 　15.6 创建、插入和删除节点382 　15.7 例子：生成目录表387 　15.8 文档和元素...
详解用js代码触发dom事件的实现方案
11-20
背景 前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseup、mouseenter，这些事件怎么模拟呢？ 思路 其实思路很简单，web标准中定义了一系列API接口，其中dispatchEvent允许我们向一个指定的事件目标派发一个事件，而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规则的(包括事件捕获和可选的冒泡过程)，那么这就非常强大了，我们可以基于此做很多事情了。 实现方法
Day21_学点儿JavaScript_JS DOM、点击事件 （不是重点，但是要敲一遍）
最新发布
Mr_Tang4的博客
04-11 786
js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行。onload:在页面加载完之后执行dom:用JS对html标签进行增删改查DOM操作元素、文本、属性、document节点获取元素：getElementById()/getElementsByTagName()文本：元素节点.firstChild/lastChild;属性：元素节点.attributes;元素节点.attributes.属性名称;document:元素节点.parentNode。
DOM事件 - 鼠标事件
m0_71710871的博客
06-12 538
JavaScript DOM 事件 - 鼠标事件中的部分事件说明
总结HTML DOM事件——鼠标事件
fish_skyyyy的博客
01-30 504
HTML DOM事件——鼠标事件 属性 描述 onclick 点击某个对象时触发 ondblclick 双击某个对象时触发 onmousedown 按下鼠标时触发 onmouseup 鼠标被松开时触发 onmouseenter 鼠标移入时触发 onmouseleave 鼠标移出时触发 ...
DOM鼠标移入移出事件
weixin_44208404的博客
08-11 950
1、支持冒泡的移入移出事件（子元素可继承） （1）鼠标移入：onmouseover （2）鼠标移出：onmouseout 2、不支持冒泡的移入移出事件（子元素不可继承） （1）鼠标移入：onmouseoenter （2）鼠标移出：onmouseleave ...
事件知识点总结 --初学JS
typ的blog，记录工作中的问题、学习中的笔记、生活中的感想。
04-26 1341
一、事件的介绍 1.事件是什么 简单来说，事件就是用户和浏览器之间的交互行为 比如：点击鼠标、鼠标移动、关闭窗口...... 2.事件的对象 在事件对象中封禁了当前事件相关的一切信息 比如：鼠标的坐标 键盘哪个建被按下 鼠标滚轮滚动的方向等等， 当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递进响应函数 这里举个例子： 这里涉及到onmousemove事件，该事件会在鼠标移动时触发 <!DOCTYPE html> <html lang="en"&g..
js-鼠标滚轮
weixin_47295886的博客
10-26 1740
/但是火狐不成功，因为取消默认行为在火狐中使用addEventListener()方法绑定响应函数u，取消默认行为的时候不能使用return false;---需要使用event.preventDefault()取消默认行为。火狐需要使用：DOMmouseScroll来绑定滚动事件，注意该事件需要通过。向下滚动：-120---值不看大小--只看正负。//当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动。第一步：知道滚轮有没有滚动：鼠标滚轮事件--)：鼠标滚轮滚动的方向——不支持火狐。
鼠标滚轮(mousewheel)和DOMMouseScroll事件 （转载）
weixin_30536513的博客
06-14 188
转自：http://www.w3cmm.com/javascript/mousewheel-dommousescroll.html IE6.0首先实现了mousewheel事件。此后，Opera、Chrome和Safari也都实现了这个事件。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到d...
JS事件属性总结【鼠标 / 键盘 / 表单】
前端、python爱好者
10-20 726
前言： JS事件通常是指用户通过鼠标或者键盘以及其他方式对浏览器或浏览器网页中的某些节点或者元素进行操作，是用户与浏览器交互最为常见的方式，主要包含以下事件： 1、鼠标事件 2、键盘事件 3、表单事件 鼠标事件 下列代码使用了body作为点击的元素，需要在body中加入一个元素节点或文字节点，为方便区别比较，事件相近的做到了一起，常用的鼠标事件前加了 ✦ ✦1、onclick onclick是最常见的鼠标事件，由用户使用鼠标左键点击后触发相应的函数方法 document.body.onclick = fun
js DOM : 鼠标事件
sleepy_girl的博客
07-28 1763
任何事件都有有一个事件对象，该对象作为事件函数的第一个参数 鼠标进入事件：onmouseover 、onmouseenter 鼠标移出事件 ：onmouseout 、onmouseleave 鼠标移动事件 ：onmousemove 事件绑定 var layer = document.getElementById('layer'); // 鼠标坐标是相对于layer元素的 //...
javascript完全学习手册1 源码
04-12
第10章 JavaScript事件处理 264 10.1 事件概述 264 10.1.1 事件简介 264 10.1.2 指定事件 265 10.2 原始事件模型 267 10.2.1 事件类型 267 10.2.2 使用事件返回值 269 10.2.3 使用事件this关键字 269 10.2.4 使用...
JavaScript权威指南(第六版) 清晰-完整
04-25
第15章 脚本化文档 15.1 DOM概览 15.2 选取文档元素 15.3 文档结构和遍历 15.4 属性 15.5 元素的内容 15.6 创建、插入和删除节点 15.7 例子：生成目录表 15.8 文档和元素的几何形状和滚动 15.9 HTML表单 15.10 其他...
DOM鼠标事件、 表单事件、添加事件监听
酒馆不打烊
02-09 4343
鼠标事件 click:单机事件 dblclick：双击事件 mousedown:鼠标按下时触发 mouseup:鼠标抬起是触发 mouseenter:鼠标移入触发 mouseleave：鼠标离开触发 mousemove:鼠标移动 &amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; .btn{ width: 100px; height: 50px; bord...
DOM - 鼠标事件
qq_53109172的博客
07-25 268
这次的触发就可以很清晰的看见了，虽然进入 btn 区域时，也触发了离开的时候，但是没有像禁止冒泡前面的时候不仅触发离开还触发进入的事件，只是因为从 box 移入到了 btn ，且 btn 属于上层元素，所以是真的离开了 box 的区域，是一种正常的事件触发。所有的鼠标事件，事件处理程序中的事件对象，都为 MouseEvent，MouseEvent 是一个构造函数。这两个属性是相对于鼠标上一次移动位置，一个移动事件的触发时持续的，所以这两个属性的值，是。这两个属性等效于 clientX 和 clientY。
js的事件
2301_80137119的博客
11-18 231
onclick-----鼠标点击某个对象ondblclick----鼠标双击某个对象onmouseover---鼠标被移到某元素之上onmouseout---鼠标从某元素移开onmousemove----某个鼠标按键被按下onmouseup----某个鼠标按键被松开oncontextmenu---右键事件onmousewheel-- 当滚轮被滚动的时候。
JavaScript-事件绑定
冰点契约的博客
09-18 459
JavaScript事件绑定 在JavaScript中只有标签可以绑定事件，事件方法名都以on开头，一般给非表单元素绑定事件 例: let element=document.getElementByID("xxx"); //事件函数 element.onxxx=function(){ //事件体； } onclick:单击事件 ondbclick:双击事件 onmouseenter:鼠标进入 onmouseleave:鼠标离开 onmouseover:鼠标悬浮，等价于onmouseenter onmou
js获取鼠标点击的dom
05-26
可以使用事件对象的 `target` 属性来获取鼠标点击的 DOM 元素。在点击事件的回调函数中，可以将事件对象作为参数传入，然后通过 `event.target` 获取该元素。 例如： ```javascript document.addEventListener('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值