焦点是光标的获得与失去
鼠标点击事件
键盘事件
鼠标事件
表单事件
其他事件
回调函数的特点:由其他程序负责调用该函数
第一种方式，直接在标签中使用事件句柄
<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.........");
}
<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属性" />
通过点击一个按钮狂，将其变为复选框
<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"/>
回车键的键值是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("正在进行验证....");
}
}
执行表达式，但不返回任何结果
javascript:void(0)其中javascript:作用是告诉浏览器后面是一段JS代码。
以下程序的javascript:是不能省略的
<a href="javascript:void(0)" onclick="window.alert('test code')">
既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
a>
void()这个小括号当中必须有表达式，且是数字几都可以
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
区分java中的for each结构，for each结构中是数组元素，for in是数组下标
// for..in
for(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]);//不用加双引号
}
with语句的调用先放在()内，在里面调用属性即可
with(u){
alert(username + "," + password);
}