JS体系中DOM事件的含义

最新推荐文章于 2022-01-10 20:12:08 发布
最新推荐文章于 2022-01-10 20:12:08 发布
阅读量466 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40752764/article/details/104710381
版权

DOM中的事件01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <div id="one" >
                            div
                    </div>
</body>
</html>

<script type="text/javascript">
                    //事件的本质：div要被看成是一个对象，就可以添加一个属性了 。给对应的元素对象添加一个function类型的属性。
                                //这个function会在对应的时间被调用。
                                //调用的时间跟属性的名称有关。
                                //1.获得div
                                      var one=document.getElementById("one");
                                //2.为div新增一个属性
                                        //在js中为一个对象属性非常简单，连（在赋值之前）声明都不用声明。就好像数组里面数组长度声明为5，但是可以为第九个元素赋初值一样。
                                 one.οnclick=function( ){
                                        //对象添加了一个onclick属性，onclick属性是一个函数；当点击它的时候被调用
                                            alert("aaa");
                                        } 
                    //还可以用其他的事件被支持：HTML DOM Event中含有被支持的事件的属性名称
   </script>

DOM中的事件02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <div id="one"  οndblclick="alert('bbb')">
                    <!-- 直接填写js代码，比较快捷的方式，相当于填写函数体中的代码-->
                                    这是div
                    </div>
              </body>
</html>

<script type="text/javascript"></script>

//以上是为属性添加两种属性的方式

//被支持单位常用属性有哪些 ：onblur   onfocus这两种最常用的方式就是输入框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <input type="text"   id="two"  value=请输入用户名/邮箱/手机号/> 
 </body>
</html>

<script type="text/javascript">
                    //被支持单位常用属性有哪些 ：onblur   onfocus这两种最常用的方式就是输入框
                    var two=document.getElementById("two");//获得Input对象
                    two.οnfοcus=function(){
                        alert('onfocus');
                    }
                    two.οnblur=function(){
                        alert('onblur');
                    }
                    //经常用在注册界面规则的校验；登录的时候输入框
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------

//被支持单位常用属性有哪些 ：onchange 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <input type="text"   id="two"  > 
 </body>
</html>

<script type="text/javascript">
                    var two=document.getElementById("two");//获得Input对象
                    two.οnchange=function(){
                        alert('onchange');
                    }
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------

另外onchange最长用的是在select中

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <select id="three">
                                    <option>安徽</option>
                                    <option>江苏</option>
                                    <option>山东</option>
                    </select>
 </body>
</html>

<script type="text/javascript">
                    var three=document.getElementById("two");//获得Input对象
                    three.οnchange=function(){
                        alert('onchange');
                    }
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------

//常用的onkeydown   onkeypress  onkeyup属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head> 
                        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
                         <title>DOM中的事件</title>
        </head>
                        <body>
                                        <input type="text"   id="two" /><br/>
                        </body>
</html>

                       <script type="text/javascript">
                                            //onkeydown   onkeypress  onkeyup
                                            var two =  document.getElementById("two");
                                            two.οnkeydοwn=function (){
                                                alert("onkeydown")；
                                                }
                                            //函数的调用不看参数，只看函数的名称有没有被调用；调用成功却没有接收，加一个参数去接收
                                            //event中的属性和方法
                        </script>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
            <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                        <title>DOM中的事件</title>
            </head>
            <body>
                        <input type="text" id="two" /><br/>
            </body>
</html>

            <script type="text/javascript">
                var two =  document.getElementById("two");
                    two.οnkeydοwn=function (event){
                        if(event.keyCode == 13){
                            alert("表单提交啦!");
                        }
                    }
            </script>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Insert title here</title>
            <script type="text/javascript">
                //被支持的常用事件有哪些?
                // onload ：表示加载完毕会触发它
                function fun1(){
                    var two =document.getElementById("two");
                    alert(two);
                }
                </script>
</head>
            <body οnlοad="fun1();">
                <input type="text" id="two" /><br/>
            </body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

/*被支持的常用事件有哪些
                           onmousedown 鼠标按钮被按下  4  1   9  Yes
                            onmouseup    鼠标按钮被松开   4   1   9   Yes
                            onmousemove   鼠标被移动      3   1   9    Yes
                            onmouseout       鼠标从某个元素上离开      4  1   9  Yes
                            onmouseover     鼠标移到某个元素之上       3  1   9   Yes
                        */

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Insert title here</title>
                <style type="text/css">
                div {
                    width:300px;
                    height:300px;
                    border: 1px solid red;
                }
                </style>
            <script type="text/javascript">
                //被支持的常用事件有哪些?
                /* onmousedown 鼠标按钮被按下。 4 1 9 Yes 
                    //onmouseup 鼠标按键被松开。 4 1 9 Yes  
                    onmouseover 鼠标移到某元素之上。 3 1 9 Yes 
                    onmouseout 鼠标从某元素移开。 4 1 9 Yes 
                    onmousemove 当鼠标悬停时,连续被触发.。 3 1 9 Yes 
                    */
              function fun1(){
                    var two =document.getElementById("two");
                    two.οnmοusedοwn=function (event){
                        //鼠标按键按下时触发
                        //获得按下的是哪个键
                        alert(event.button);
                    }
                /*     two.οnmοuseup=function (){
                        alert("onmouseup");
                    } */
                    /* two.οnmοuseοver=function (){
                        alert("onmouseover");
                    }
                    two.οnmοuseοut=function (){
                        alert("onmouseout");
                    } */
                    two.οnmοusemοve=function (event){
                        //alert("onmousemove");
                        alert(event.clientX+"=="+event.clientY);
                    } 
                }
            </script>
</head>
            <body οnlοad="fun1();">
                <div id="two">
                </div>
            </body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head> 
                        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
                         <title>DOM中的事件</title>
                         <script type="text/javascript">
                                            //表单提交之前触发
                                            //表单提交的时候要验证，验证结果分为两种一种成功一种失败，那么如何拦截表单提交
                                            //该事件是众多事件中最特殊的一个，该事件可以返回一个Boolean型的值
                                            //提交成功就不拦截他true
                                            //false 则拦截表单提交
                                        //拦截方式2         preventDefault() ==>
                                    function fun1(){
                                                var two=document.getElementById("two");
                                                two.οnsubmit=function(event){
                                                    alert('onsubmit');
                                                    /* return false； */
                                                 event.preventDefault();
                                                }
                                                
                                            }
                                    
                        </script>
        </head>
                        <body οnlοad="fun1();">
                                    <form id="two">
                                            <input type="text" name="name"><br /> 
                                            <input type="submit" value="提交" />
    </form>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Insert title here</title>
                <style type="text/css">
                    div {
                        border: 1px solid red;
                    }
                    #one {
                        width:300px;
                        height:300px;
                    }
                    #two {
                        width:100px;
                        height:100px;
                    }
                </style>
                <script type="text/javascript">
                    /* stopPropagation() 停止事件的继续传播
                        */
                        function fun1(){
                                var one =document.getElementById("one");
                                var two =document.getElementById("two");
                                one.οnclick=function(){
                                    alert("oneoneoneone");
                                }
                                two.οnclick=function(event){
                                    alert("twotwotwotwo");
                                    event.stopPropagation();
                                }
                            }
                        
                </script>
</head>
                <body οnlοad="fun1();">
                            <div id="one" >
                                        <div id="two"></div>
                            </div>
                </body>
</html>

有错误的欢迎大佬指正

 

 

 

黑白车
关注
专栏目录
原生JavaScript事件详解！！！
Sixstar_yanxin的博客
08-12 460
JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。 小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决定科普一下了。 首先声明，小菜懂的也不是很多，只是把我的思路和大家分享一下。 DOM0事件模型 事件模型在不断发展，早期的事件模型称为DOM0级别。 DOM0事件模型，所有的浏览器都支持。 直接在dom对象上注册事件名称，就是DOM0写法...
Javascript
最新发布
weixin_43460646的博客
08-14 1077
本博客主要为黑马程序员网课中关于 JS 模块（网课在下面有介绍）所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！ JS入门到精通、DOM BOM操作、jQuery案例精讲、AJAX node.js webpack git一套全覆盖 一、JS基础 了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。 体会现实世界中的事物与计算机
DOM事件理解
qq_38148024的博客
06-15 332
DOM事件级别分类 DOM0级、DOM2级、DOM3级事件。 DOM0级事件 2步： 1、先找到DOM节点 2、把处理函数赋值给该节点对象的事件属性 eg： <div id="box"></div> <script> var box = document.getElementById('box') box.onclick = function () { console.log("1") } </script>
DOM事件的理解
weixin_37347069的博客
12-05 727
1、DOM事件级别（DOM标准指定的级别） DOM0: 在js中写法element.onclick = function(){}， 在html中onclick属性上加js语句； DOM2: element.addEventListener(‘click’,function(){},false); 冒泡还是捕获由false/true来定 DOM3: element.addEventListener(...
js中的DOM事件
举的博客
03-17 211
DOM 事件1、Js中的事件行为,结构,样式分离的页面一般事件 onclick 鼠标点击时触发此事件ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseup 鼠标按下后松开鼠标时触发此事件onmouseover 当鼠标移动到某对象范围的上方时触发此事件onmousemove 鼠标移动时触发此事件onmouseout 当鼠标离开某对象范围时触发此事件o...
JS-DOM的含义
dxm809的博客
02-08 499
DOM是W3C组织推荐的处理XML的标准编程接口，DOM是一种规范，并没有定义具体的语言，以及文档类型，可以是用JAVA,PHP,C#来处理XML,HTML等 而这里用的是狭义的DOM,是用javascript处理html的接口...
前端体系结构知识概括
weixin_41005188的博客
10-16 5099
前端体系结构知识概括前端体系简介三大框架CSS简介HTML简介JavaScript详细简介UI 组件简介 前端体系简介 前端开发的核心是HTML + CSS +JavaScript。 本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。 HTML基础知识点： CSS基础知识点： JS基础知识点： 三大框架 前端三大框架以及jquery与bootstrap这种框架有什么区别？ 我们必
java培训课程体系
11-06
- **DOM操作：** 学习如何使用JavaScript操作DOM树。 - **事件处理：** 掌握事件监听器的添加与移除。 - **AJAX技术：** 了解异步请求的基本原理及其在Web开发中的应用。 #### 四、JavaWeb程序设计（3周） ##### ...
JavaScript入门学习资料包
04-18
此外，可能还会涉及事件处理、DOM操作、AJAX异步通信以及BOM（浏览器对象模型）等内容，这些都是JavaScript开发者必须掌握的基础技能。 接下来，"JavaScript使用手册"可能包含了JavaScript的语法细节和常见API的...
资深阿里程序员一一为你解刨Web前端知识体系结构
程序员生活
01-18 722
只要接触过前端，都会指导web前端的知识主要由三部分组成：分别为静态html，样式css，动态javascript（简称js）这三大部分组成。其三部分组成的一个体系的复杂程度不亚于其他一门技术的复杂程度。当然对于跟我一样厉害的那些web前端来说那就是小菜一碟，但是很多人都只学了表面，基础部分，很多重要的知识，深入部分都是被忽视了！其实这也就导致了部分前端开发工作者学了前端，但是却找不到工作，有工...
关于Dom事件的理解
sinat_41707161的博客
03-25 321
一、DOM事件的级别     DOM事件分为三个级别，分别是0级、2级和3级事件。     分别长这样：0级事件： Element.onclick = function(){}; 2级事件: Element.addEventListener('click',function(){},false); 3级事件： Element.addEventListener('keyup',function(){...
js DOM常见事件
weixin_33890526的博客
01-14 119
js事件命名为on+动词 1.onclick事件，点击鼠标时触发，ondbclick双击事件 <h1 onclick="this.innerHTML='点击后文本'">点击文本!</h1> <h1 onclick="changetext(this)">点击文本!</h1> <script> functi...
dom的事件体系
lifangAccount的博客
02-20 142
1、dom事件级别： dom0级 ：一个事件的处理程序只能对应一个函数 dom2级：可以为特定对象的事件注册多个事件监听 dom3级： 2、事件流 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)： window->document->html->body-> ... ->element window是浏览器窗口，是bom的核心 document是window的一个属性， BOM是浏览器对象模型，提供了一组独立于内容的对象，例如
DOM事件简介
zlllxl2002的专栏
03-11 442
DOM事件简介 Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。而这个生命周期让DOM事件有更
js中常用DOM事件总结
weixin_43723064的博客
12-17 251
event对象 属性： target： 事件的实际目标 currentTarget： 事件处理程序绑定的元素 type： 事件的类型，如‘click’ 方法: preventDefault(): 取消事件的默认行为 stopPropagation(): 取消事件进一步捕获或冒泡 2.UI事件 load: 页面完全加载后在window上触发，也可在图像加载后在img上触发 unload： 页面完...
【JavaScript中常用的DOM事件】
weixin_50312169的博客
01-10 489
JavaScript中常用的DOM事件 事件的关键属性（以点击事件为例）： 属性 值 解释 target <h1>Kevin</h1> 点击事件触发的DOM节点 type click 事件名称 pageX/pageY 92/47 鼠标事件触发的页面坐标 点击事件 监听DOM事件=>使用DOM操作=>修改DOM属性 const boxDiv = document.querySelector('.box'); const imgArr = boxD
DOM 编程与事件
qq_34558909的博客
03-19 156
一 DOM ​ 前言: DOM(Document Object Model)是文档对象模型,是一套标准: html 和 xml都遵循这套标准! 1.1 DOM结构 1.2 获取DOM 节点的三种方式 //通过id 获取节点 document.getElementById("mydiv"); //通过名字获取节点 document.getElementsByName("input"); /...
深入理解DOM事件机制
weixin_33763244的博客
02-24 565
前言 本文主要介绍： DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一、DOM事件级别 针对不同级别的DOM，我们的DOM事件处理方式也是不一样的。 DOM级别一共可以分为4个级别：DOM0级「通常把DOM1规范形成之前的叫做DOM0级」，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级...
JavaScript实现DOM事件处理与事件委托
在JavaScript中，DOM元素事件的处理通常通过直接在元素上设置事件处理器，如`onclick`属性。然而，这种单一事件绑定的方式在面对更复杂的需求时，例如为同一个元素添加多个事件监听器，或者需要动态地添加和移除事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值