JS体系中DOM事件的含义

最新推荐文章于 2022-02-23 11:26:58 发布
最新推荐文章于 2022-02-23 11:26:58 发布
阅读量441 收藏
点赞数
分类专栏： 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>

有错误的欢迎大佬指正

 

 

 

黑白车
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JavaScript事件详解！！！
Sixstar_yanxin的博客
08-12 419
JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。 小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决定科普一下了。 首先声明，小菜懂的也不是很多，只是把我的思路和大家分享一下。 DOM0事件模型 事件模型在不断发展，早期的事件模型称为DOM0级别。 DOM0事件模型，所有的浏览器都支持。 直接在dom对象上注册事件名称，就是DOM0写法...
DOM事件理解
qq_38148024的博客
06-15 275
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 679
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 183
DOM 事件1、Js中的事件行为,结构,样式分离的页面一般事件 onclick 鼠标点击时触发此事件ondblclick 鼠标双击时触发此事件onmousedown 按下鼠标时触发此事件onmouseup 鼠标按下后松开鼠标时触发此事件onmouseover 当鼠标移动到某对象范围的上方时触发此事件onmousemove 鼠标移动时触发此事件onmouseout 当鼠标离开某对象范围时触发此事件o...
JS-DOM的含义
dxm809的博客
02-08 467
DOM是W3C组织推荐的处理XML的标准编程接口，DOM是一种规范，并没有定义具体的语言，以及文档类型，可以是用JAVA,PHP,C#来处理XML,HTML等 而这里用的是狭义的DOM,是用javascript处理html的接口...
js中DOM事件绑定分析
11-27
js事件绑定 JavaScript 有三种事件模型： 内联模型 脚本模型 DOM2 模型 1、内联模型 //基本废除不用 <input type="button" value="按钮" onclick="alert('Lee');" /> <input type="button" ...
深入理解JS DOM事件机制
11-27
2、事件冒泡IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。3、事件捕获事件捕获的思想是不太具体的节点...
理解javascript中DOM事件
10-23
主要帮助大家理解javascript中DOM事件，解决了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用，感兴趣的小伙伴们可以参考一下
关于Dom事件的理解
sinat_41707161的博客
03-25 298
一、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 99
js事件命名为on+动词 1.onclick事件，点击鼠标时触发，ondbclick双击事件 <h1 onclick="this.innerHTML='点击后文本'">点击文本!</h1> <h1 onclick="changetext(this)">点击文本!</h1> <script> functi...
dom的事件体系
lifangAccount的博客
02-20 105
1、dom事件级别： dom0级 ：一个事件的处理程序只能对应一个函数 dom2级：可以为特定对象的事件注册多个事件监听 dom3级： 2、事件流 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)： window->document->html->body-> ... ->element window是浏览器窗口，是bom的核心 document是window的一个属性， BOM是浏览器对象模型，提供了一组独立于内容的对象，例如
DOM事件简介
zlllxl2002的专栏
03-11 415
DOM事件简介 Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。而这个生命周期让DOM事件有更
js中常用DOM事件总结
weixin_43723064的博客
12-17 230
event对象 属性： target： 事件的实际目标 currentTarget： 事件处理程序绑定的元素 type： 事件的类型，如‘click’ 方法: preventDefault(): 取消事件的默认行为 stopPropagation(): 取消事件进一步捕获或冒泡 2.UI事件 load: 页面完全加载后在window上触发，也可在图像加载后在img上触发 unload： 页面完...
【JavaScript中常用的DOM事件】
weixin_50312169的博客
01-10 442
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 131
一 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 544
前言 本文主要介绍： DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一、DOM事件级别 针对不同级别的DOM，我们的DOM事件处理方式也是不一样的。 DOM级别一共可以分为4个级别：DOM0级「通常把DOM1规范形成之前的叫做DOM0级」，DOM1级，DOM2级和 DOM3级，而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级...
DOM系列：DOM事件简介
人生代码 ---- 公众号
03-25 1597
事件是什么？ 事实上，你创建的所有内容都可以按照下面的语句来建模： 这样的填空题有很多种答案。第一个空格填将一些事情；第二个空格描述了人们对该事件做出的反应。比如下面这样的示例： 当 页面加载 时，播放一段视频 当 点击发生 时，提交已填好的表单 当 鼠标释放 时，弹出下人对话框 当 删除键按下 时，删除选中的图片 当 触摸屏幕 时，把卡片移出屏幕 当 文件下载发生 时，请更新进度条 这样的...
DOM事件简介（javascript）
weixin_50053454的博客
02-23 568
1.什么是事件？ 时间就是网页在展示过程中产生的一些用户行为和客户端行为。 用户行为：用户点击，输入，拖拽等行为 客户端行为：窗口打开关闭，数据的上传 下载，解析等行为 2.事件有哪些类型？ 鼠标事件，键盘事件，表单事件，window事件，拖拽事件 3.事件结构 事件目标：事件发生在那个目标上，如点击到的button就是事件目标 事件类型/事件名：在目标上发生了什么事件，如click指点击事件 事件函数：事件发生触发时，调用的函数 4.事件的触发流程？ 客户端或者用户产生了
javascript事件和dom操作
最新发布
07-28
- *1* *3* [JavaScript基础: DOM操作中常用事件](https://blog.csdn.net/u011863822/article/details/124199744)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值