05 JS 事件
5.1 常用事件
焦点是光标的获得与失去
鼠标点击事件
键盘事件
鼠标事件
mousedown 鼠标按下
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
mouseup 鼠标弹起
表单事件
其他事件
5.2 注册事件方式
回调函数的特点:由其他程序负责调用该函数
第一种方式，直接在标签中使用事件句柄
<script> function sayHello(){ alert("hello js!"); }</script><!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。--><input type="button" value="hello" onclick="sayHello()"/>
复制代码
第二种方式，使用 js 代码完成事件注册
<input type="button" value="hello4" id="mybtn2" /><script type="text/javascript"> function doSome(){ alert("do some!"); }// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)var btnObj = document.getElementById("mybtn");// 第二步:给按钮对象的onclick属性赋值btnObj.onclick = doSome; // 注意:别加小括号. btnObj.onclick = doSome();这是错误的写法.// 这行代码的含义是,将回调函数doSome注册到click事件上.</script>
复制代码
第三种注册方式，使用匿名函数
var mybtn1 = document.getElementById("mybtn");mybtn1.onclick = function(){ // 匿名函数,这个匿名函数也是一个回调函数. alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.}
复制代码
将其合并
document.getElementById("mybtn").onclick = function(){ alert("test22222222.........");}
复制代码
5.3 代码执行顺序
<script type="text/javascript"> // 第一步:根据id获取节点对象 var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
// 第二步:给节点对象绑定事件 btn.onclick = function(){ alert("hello js"); }</script>
<input type="button" value="hello" id="btn" />
复制代码
执行错误，返回了 null，因为还未获取到 id 元素，所以我们添加上面的一个函数 load()，页面加载完的时候才会发生
<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。--><body onload="ready()"> <script type="text/javascript"> function ready(){ var btn = document.getElementById("btn"); btn.onclick = function(){ alert("hello js"); } } </script> <input type="button" value="hello" id="btn" /></body>
复制代码
<body onload="ready()">//等同于//需要写在script内window.onload=ready;
复制代码
总结
<script type="text/javascript"> // 页面加载的过程中,将a函数注册给了load事件 // 页面加载完毕之后,load事件发生了,此时执行回调函数a // 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件 // 当id="btn"的节点发生click事件之后,b函数被调用并执行. window.onload = function(){ // 这个回调函数叫做a document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b alert("hello js.........."); } }</script>
<input type="button" value="hello" id="btn" />
复制代码
总结模板
<script> window.onload = function(){ document.getElementById("id属性").onclick = function(){ //获得属性后 利用属性执行函数 } }</script>
<input type="button" value="框中的值" id="id属性" />
复制代码
5.4 设置节点的属性
通过点击一个按钮狂，将其变为复选框
<script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var mytext = document.getElementById("mytext"); // 一个节点对象中只要有的属性都可以"." mytext.type = "checkbox"; } }</script>
<input type="text" id="mytext"/><input type="button" value="将文本框修改为复选框" id="btn"/>
复制代码
5.5 捕捉回车键
回车键的键值是 13
ESC 键的键值是 27
按钮键是 onclick
而回车键 onkeydown
回调函数的参数可以有，有与没有都会调用回调函数
usernameElt.onkeydown = function(a, b, c){ // 获取键值 alert(a); // [object KeyboardEvent] // alert(b); // alert(c);}
复制代码
回车键摁下，浏览器会 new 一个对象，用函数接收当前发生的事件，用当前事件调用属性获取值
usernameElt.onkeydown = function(event){ // 获取键值 // 对于“键盘事件对象"来说,都有keyCode属性用来获取键值. alert(event.keyCode);}
复制代码
如果捕获回车键，需要在事件函数中判断是否为键值
usernameElt.onkeydown = function(event){ if(event.keyCode === 13){ alert("正在进行验证...."); }}
复制代码
5.6 JS 运算符
执行表达式，但不返回任何结果
javascript:void(0)其中 javascript:作用是告诉浏览器后面是一段 JS 代码。
以下程序的 javascript:是不能省略的
<a href="javascript:void(0)" onclick="window.alert('test code')"> 既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。</a>
复制代码
void()这个小括号当中必须有表达式，且是数字几都可以
5.7 JS 的控制语句
java 数组的定义与使用
int[] arr = {1,2,3,4,5,6};int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};String[] arr3 = {"a","b","c"};String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};
复制代码
javascript 中是定义为 var，且类型可以不一致，可以不定义范围有多大，可自扩容
// 创建JS数组var arr = [false,true,1,2,"abc",3.14]; // JS中数组中元素的类型随意.元素的个数随意.// 遍历数组for(var i = 0; i < arr.length; i++){ alert(arr[i]);}
复制代码
对比以上代码的不同，可以增加一个与 java 不同的结构 for in
5.7.1 for in 结构
区分 java 中的 for each 结构，for each 结构中是数组元素，for in 是数组下标
// for..infor(var i in arr){ //alert(i); alert(arr[i]);}
复制代码
for in 结构还可以遍历对象属性
// for..in语句可以遍历对象的属性User = function(username,password){ this.username = username; this.password = password;}var u = new User("张三", "444");alert(u.username + "," + u.password);alert(u["username"] + "," + u["password"]); // 另一种调用方式
for(var shuXingMing in u){ //alert(shuXingMing) 输出的是username和password //alert(typeof shuXingMing) // shuXingMing是一个字符串 alert(u[shuXingMing]);//不用加双引号}
复制代码
5.7.2 with 结构
with 语句的调用先放在()内，在里面调用属性即可
with(u){ alert(username + "," + password);}
复制代码
评论