Java教程

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编程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航