js的事件监听

最新推荐文章于 2024-07-24 20:11:59 发布
最新推荐文章于 2024-07-24 20:11:59 发布
阅读量110 收藏
点赞数 1
文章标签： html js 事件监听 事件侦听
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43885123/article/details/84760625
版权

js的事件监听


添加事件监听的三种方式：
我们以点击一个div使其背景颜色从绿色变为橘色为例

1.

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: mediumspringgreen;
        }
    </style>
</head>
<body>
<div id="div" onclick="change_color()"></div>
<script>
    function change_color(){
        document.getElementById('div').style.backgroundColor='orange';
    }
</script>
</body>
</html>

2.

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: mediumspringgreen;
        }
    </style>
</head>

<body>
<div id="div"></div>
</body>

<script>
    var div=document.getElementById('div');
    div.onclick=function(){
        div.style.backgroundColor='orange';
    }
</script>
</html>

3.addEventListener 可以添加多个（可以相同），

需要考虑IE浏览器和其他浏览器例如谷歌的兼容性
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: mediumspringgreen;
        }
    </style>
</head>

<body>
<div id="div"></div>
</body>

<script>
        var div=document.getElementById('div');
        //判断浏览器。做兼容性处理
        if(document.addEventListener){
            div.addEventListener('click',function(){
                div.style.backgroundColor='orange'
            },true)//默认为false  事件冒泡和事件捕获
        }else{
            div.attachEvent('onclick',function(){//IE
                div.style.backgroundColor='orange'
            })
        }
</script>
</html>
我卢本伟没有开挂
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript事件监听器总结
Maybe_ss的博客
10-19 3655
事件监听总结，事件流，捕获阶段、目标阶段、冒泡阶段，事件代理，阻止事件冒泡，阻止默认事件。
JS事件监听方法
weixin_57726973的博客
06-09 3742
我们在学习的时候，最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法。 传统事件绑定方法的特点如下： 1.事件名称之间一定要加上on，比如：onclick、onload、onmousemove。2.兼容主流的浏览器，包括低版本的IE。3.当同一个元素绑定多个事件时，只有最后一个事件会被添加，并且传播模式只能是冒泡模式。二、addEventListener()方法特点：1.element.addEventListener(event, function, useCapture)中的第三个参数可以控
js监听
yiyezhichen的博客
01-15 234
this.touchListener = cc.EventListener.create({ 3 event: cc.EventListener.TOUCH_ONE_BY_ONE, 4 /* 5 可选event类型列表: 6 7 cc.EventListener.TOUCH_ONE_BY_ONE (单点触摸) 8 cc.EventListener.TOUCH_AL
JavaScript事件监听
CSPsy的博客
03-06 3326
JavaScript事件监听 常用的事件监听 DOM0级事件监听 DOM2级事件监听 onclick addEventListener
JavaScript 事件监听
weixin_52053631的博客
07-25 328
用什么方式触发，eg:鼠标单击click、鼠标经过mouseover登。：哪个dom元素被触发了，要获取dom元素。
JS事件监听器
wytccc的博客
11-04 444
给一个元素的某一个事件类型添加多个函数；精确删除某一个事件类型下的某一个函数
JS事件监听
weixin_64939936的博客
07-03 500
input type="button" onclick="on()" value="按钮一" />方法一：通过HTML标签中的事件属性进行绑定。alert("我被点了");alert("我被点了");通过DOM元素属性进行绑定。
JavaScript之事件监听
qq_43751200的博客
06-06 1226
JavaScript之事件监听
js事件监听
ZJJ2406661705的博客
04-29 209
介绍JavaScript事件监听两种方式，并给出区别。
js事件监听的理解
Ssss555123的博客
09-18 1168
事件监听就是DOM对事件进行监听，知道什么时候发生了这个事件，从而执行一些写好的程序。
js事件监听机制(事件捕获)总结
12-04
在父元素上监听事件，然后根据事件对象的`target`属性判断哪个子元素触发了事件，从而进行相应的处理。 总的来说，理解JavaScript的事件监听机制，特别是事件捕获和冒泡，是编写高效且跨浏览器的前端代码的关键。...
js事件监听器用法实例详解
12-10
这样，点击按钮时，会依次弹出"第一个监听事件"和"第二个监听事件"。 3. **移除事件监听器** 使用`removeEventListener`可以移除特定的事件监听器。关键在于移除时需要提供相同的函数引用，而不是函数体。例如： ...
js 冒泡事件与事件监听使用分析
12-11
总的来说，理解JavaScript中的事件冒泡和事件监听是构建交互式Web应用的基础。通过合理利用这两种机制，开发者可以创建出响应用户行为的复杂交互，并且能确保这些交互在各种浏览器中都能正常工作。在实际项目中，...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 2669
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 1054
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
[HTML]一文掌握
CSDN20221005的博客
07-21 864
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 451
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
【HTML — 构建网络】HTML 入门
07-24 579
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
IPython的HTML魔法：%%html_header命令全解析
最新发布
2401_85762266的博客
07-24 937
IPython是一个增强的Python交互式解释器，而Jupyter Notebook是一个基于Web的开源项目，允许用户创建和共享包含实时代码、方程、可视化和解释性文本的文档。HTML头部是网页文档的元数据区域，它包含了文档的标题（title）、样式表链接（link）、脚本链接（script）等信息。的使用，可以让您更灵活地定制Notebook的样式和功能，从而提供更加丰富和个性化的文档体验。命令的使用非常简单。你只需要在Notebook的单元格中输入该命令，然后写入你想要添加到头部的HTML代码即可。
javascript事件监听器
09-25
在JavaScript中，可以使用addEventListener方法来绑定事件监听器。通过addEventListener方法，可以指定要监听的事件类型（如点击事件）和要执行的函数。当触发指定的事件时，绑定的函数将会被调用。 在你提供的代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值