[JavaScript知识库] JavaScript DOM编程

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript DOM编程 -> 正文阅读

[JavaScript知识库]JavaScript DOM编程

DOM编程

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 onload="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('你好')"/>