DOM事件处理方式

最新推荐文章于 2022-08-24 20:27:32 发布
最新推荐文章于 2022-08-24 20:27:32 发布
阅读量543 收藏
点赞数
分类专栏： html javascript 文章标签： dom 浏览器 ie 8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangbaokang/article/details/78029239
版权

DOM事件处理分DOM 0级处理，2级处理，以及兼容IE8以下版本。以下代码可以兼容各大浏览器版本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件</title>
</head>
<body>
    <div id="div">
        <button id="btn">按钮</button>
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        if(btn.addEventListener){// DOM 2级处理方式
            btn.addEventListener("click",demo);
        }else if(btn.attachEvent){
            btn.attachEvent("onclick",demo);// 兼容IE8以下版本
        }else{
            btn.onclick = demo();//DOM 0级处理方式
        }

        function demo(){
            alert("hello");
        }
    </script>
</body>
</html>
黄宝康
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js之DOM事件
m0_61547956的博客
04-22 3346
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
【JS】DOM事件模型
LZGS_4的专栏
05-29 2896
DOM事件模型主要包含4个方面的内容，分别是： 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下： 首先，什么是DOM？文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持Javascript的所有浏览器都支持DOM。 在DOM眼中，HTML跟XML一样是一种树形结构的文档，是根（roo
HTML DOM - 事件处理方式
長い冬が越さなければ春が来ない。
12-05 367
一、html中事件处理之用函数来处理 function changetext(clickedObject) { clickedObject.innerHTML="Click is So Cool!";}请点击这段文本！ 二、按钮的点击事件 点击按钮执行点击函数的示例 显示日期 function showDate() { document.getElement
DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式
code_ja的博客
07-15 1884
1.传统的方式是将一个函数赋值给一个事件处理程序属性。看看DOM0级方式例如：var btn = document.getElementById("myBtn"); btn.onclick = function() { alert(this.id); //"myBtn" }使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此程序中的this引用的是当前的元素btn，可以通过this访
常见的DOM操作方式有哪些
yuxinSir的博客
07-09 4845
1.背景介绍 什么是DOM？ DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。 在Chrome浏览器端，单击右键打开View Page
DOM事件机制
叶子yes的博客
08-24 1006
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
DOM以及DOM事件的处理方式
05-26 879
文章目录01.DOM概述02.DOM事件概述03. 事件属性（类型）04.事件对象05.事件的监听06.事件的捕获和冒泡07.阻止事件冒泡的方式 01.DOM概述 Document Object Model （DOM）文档对象模型：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM，可访问 HTML 文档的所有元素，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DO
DOM事件处理函数、DOM0，DOM2的优缺点
LeslieCheung_的博客
05-09 2873
目录（一）定义（二）HTML事件处理函数① 特点② 缺点（三）DOM0级事件处理函数① 使用② 删除③ 缺点（四）DOM2级事件处理函数① 使用② 删除③ 注意 （一）定义 事件就是用户或者浏览器自身执行的某种行为，例如click，mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理函数（或者事件监听器）。 （二）HTML事件处理函数 HTML <body> <form action=" "> <input type="button"
DOM事件处理程序
Cinderella_hou的博客
07-27 1228
事件就是用户或浏览器自身执行的某种动作。比如“click”，“load”，“mouseover”等都是事件的名字。响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此，click对应的时间处理程序就是 “onclick”。给事件指定事件处理程序有好几种方式。   一：HTML 方式   这种方式是利用元素的属性，直接添加事件处理程序，像下面给这样：  
DOM 事件详解
weixin_48376132的博客
07-05 4489
注册事件（绑定事件） 1. 概述 给元素添加事件，称为注册事件 / 绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 2. 传统注册方式 利用 on 开头的事件 DOM 0级事件绑定方式—— 因为 W3C 在确定 DOM 版本时，在之前已经有了事实上存在的一些事件，比如 onclick 这种直接绑定给元素的属性的事件，DOM1 中用的还是之前的事件，所以是 DOM 0级事件，而不是1级事件 <button oncilck = "alert(1)"></button> btn.
DOM中事件处理概览与原理的全面解析
09-01
传统事件类型包括表单事件（如`submit`、`change`）、Window事件（如`load`、`unload`）、鼠标事件（如`click`、`mousemove`）、键盘事件（如`keydown`、`keyup`）、DOM事件（如`DOMNodeInserted`）、HTML5新增的...
DOM事件探秘篇
08-31
DOM事件是Web开发中至关重要的一个概念，它允许开发者对用户与网页的交互进行响应。本文将深入探讨DOM事件的...在实际开发中，要注意兼容性问题，合理选择合适的事件处理方式，以确保在各种浏览器环境下都能正常运行。
深入理解JS DOM事件机制
10-21
- `getEvent()`函数用于获取当前事件对象，兼容不同浏览器的事件处理方式。 - 通过`event.preventDefault()`和`event.stopPropagation()`，可以防止事件的默认行为和冒泡。 了解这些基本概念后，开发者可以更精确...
DOM 事件流详解
09-03
通过冒泡型事件、事件监听和标准DOM事件监听这三个方面的介绍，我们可以了解到在浏览器中处理事件的不同方式。了解这些方法对于编写兼容性良好的web应用是很有必要的，尤其在处理复杂的事件逻辑时，选择合适的方法...
document.querySelector()方法
热门推荐
huangbaokang的博客
03-22 15万+
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。 获取文档中id=”container”的元素 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;ti
给Eclipse代码编辑区设置背景图片
huangbaokang的博客
12-28 1万+
1：找到Eclipse的安装路径，进入plugins目录2：进入带ui主题的文件夹3：主要关注的是css何images文件目录 在css文件增加以下样式.MPart StyledText { background-image: url(./1.jpg); background-color: white; background-position: no-repeat;
我对onselect和onchange事件的误解
huangbaokang的博客
09-12 5836
很少用onselect事件，今天我才发现onselect事件：当选择一段文字的时候触发。以前我一直以为onselect和onchange都是是内option元素切换的时候触发。是我误解了onselect事件。<!doctype html> <html> <head> <meta charset="utf-8"> <title>onselect与onchange的区别</title> <script>
eWebEditor编辑器的使用
huangbaokang的博客
01-10 5672
eWebEditor是一款文本编辑器，个人并不是很看好它，反而感觉它的样式比较丑陋，以前在项目上大都使用KindEditor或者Layui自带的Editor，对图片上传，视频上传等支持的比较好。 言归正传，今天我带领大家如何使用eWebEditor。 从网上下载eWebEditor，下载之后的目录结构如下：我的是在Eclipse里打开的。 主要是用到了ewebeditor.htm。而ew
用dom2事件处理代码
最新发布
05-28
// 使用 DOM Level 2 标准的方式添加事件处理程序 btn.addEventListener('click', myEventHandler, false); } else if (btn.attachEvent) { // 使用 IE 特定的方式添加事件处理程序 btn.attachEvent('onclick', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值