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编程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!