JavaScript DOM编程

2021/10/7 1:10:57

编程Tag： javascript 事件对象编程 Dom 鼠标绑定节点句柄

本文主要是介绍JavaScript DOM编程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

DOM编程

- - JS中的事件
  - 事件句柄
  - 事件注册
  - - - 第一种方式：
      - 第二种方式：
      - 第三种方式：
      - 第四种方式：
  - 示例——捕获回车键
  - void运算符

JS中的事件

焦点事件
blur	失去焦点
focus	获得焦点

鼠标事件
click	鼠标单击
dblclick	鼠标双击
mousedown	鼠标按下
mouseup	鼠标弹起
mouseover	鼠标经过
mousemove	鼠标移动
mouseout	鼠标离开

键盘事件
keydown	键盘按下
keyup	键盘弹起

表单事件
reset	表单重置
submit	表单提交

change 下拉列表选中项改变，或文本框内容改变

select 文本被选中

load 页面加载完毕

事件句柄

事件句柄是在事件前面加on,事件句柄在HTML标签中以属性的形式存在。

事件注册

事件注册只是把一段代码注册到某个标签节点的某个事件句柄上，页面打开时并不会执行这段代码，当该事件发生时才会去执行这段代码。

第一种方式：

在标签中使用事件句柄这个属性，在句柄后面添加要注册的代码或回调函数。

回调函数的特点是自己把这个函数写出来，但不是由自己来调用这个函数，而是由别的程序员或者别的程序去调用这个函数。

<input type="button" onclick="sayHello()"/>

第二种方式：

用纯JS代码完成事件的注册。

<body>
    <input type="button" id="btn1"/>
    <script type="text/javascript">
    	//1.获取节点对象，document是JS的一个内置对象，隶属于window对象，docement代表整个HTML页面
        var btnElem = document.getElementById("btn1");
        //2.给节点对象绑定事件，本例中给onclick属性赋值，后跟函数名或定义一个新匿名函数。
        btnElem.onclick = function(){
            alert("Hello World!");
        } 
    </script>
</body>

缺点：

因为js代码是按顺序逐行被解释器解释执行的，所以要求给节点对象绑定事件的代码必须在节点对象定义的后面，这很不灵活

第三种方式：

load事件在页面全部元素加载完毕后发生，所以可以在load事件发生后开始执行给节点对象的绑定操作。

<body onl oad="ready()">
    <script type="text/javascript">
    	function ready(){
            //1.根据id获取节点对象
            var btn2Elem = document.getElementById("btn2");
            //2.给节点对象绑定事件
            btn2.onclick = sayHello;	//注意是函数名
        }
    </script>
    <input type="button" id="btn2"/>
</body>

第四种方式：

<body>
    <script type="text/javascript">
    	window.onload = function{
            //1.根据id获取节点对象
            var btn2Elem = document.getElementById("btn2");
            //2.给节点对象绑定事件
            btn2.onclick = sayHello;	//注意是函数名
        }
    </script>
    <input type="button" id="btn2"/>
</body>

在第三种和第四种方式中，先完成页面加载完成事件的注册，并不会立刻执行这里面的代码，即给节点对象绑定事件，直到页面加载完毕才执行里面的代码，给节点对象绑定事件。

示例——捕获回车键

回车键的键值是 13

ESC键的键值是 27

<body>
    <script type="text/javascript">
    	window.onload = function(){
            //1.根据id获取节点对象
            var btn3Elem = document.getElementById("btn3");
            //2.给节点对象绑定事件
            btn2Elem.onkeydown = function(event){
                alert(event);	//[Object keyboardEvent]
                if(event.keyCode == 13){
                    alert("enter键被按下");
                }
            }
        }
    </script>
    <input type="button" id="btn3"/>
</body>
<!--
	说明：
	function(event)是我们编写的函数，由浏览器进行调用，被称为回调函数，当期望的事件发生后，浏览器会执行这个回调函数，并且也可	以根据需要给该函数传值，是否接收则看程序员编写的回调函数中形参的个数。在本例中，键盘按下事件发生，任意键都可以，浏览器会调用绑	   定的回调函数，并传一个Event对象，我们可以根据这个对象进行一些操作比如判断按下的是哪个键。

void运算符

要求：既保留超链接的样式，又在用户点击超链接的时候执行一段代码，页面还不能跳转。

<a href="" onclick="alert('你好！')">点我</a> 
<!-- 当href接的是空串时，会刷新当前页面，相当于还是会跳转，后面接一个正确的地址更不用多说 -->

<!--
	使用void运算符
	语法格式：
	javascript:void(表达式)，javascript是必须的，告诉浏览器后面的是一段javascript代码。表达式也是必须的，一般填0。
	作用：执行表达式，但不返回任何结果。
	由于href后面什么都没有，空串也不是，是一个“虚无"，所以不会跳转。
-->
<a href="javascript:void(0)" onclick="alert('你好')"/>

持续完善中…

这篇关于JavaScript DOM编程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！