<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈" />上面的代码将在HTML页面上显示一个图像,当你用鼠标点击一下时,会出现一个弹窗,显示'你把我点疼了!',onclick属性的值其实是一段JavaScript代码;这就是事件,下面是其它一些简单的事件
onclick ,当鼠标点击一下时执行一次
onmouseover ,当鼠标放上去时执行一次
onmouseout ,当鼠标移出去时执行一次
onmousedown ,当鼠标按下时执行一次
onmouseup ,当鼠标在上面松开(弹起)时执行一次
onmousedblclick ,当鼠标双击时执行一次
onload ,当对象加载完成时执行一次
以前网上十分流行的称之为RollverImages(翻转图像)的效果其实就是组合onmouseover,onmouseout这样的事件和简单的JavaScript代码实现的
<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈"
/>你可能知道,onmouseover这类的属性中的字符串将会在事件发生时当成脚本来执行,但上面的那些代码看上去十分模糊
//为了便于查看,我们将它们提取出来放在下面
this.src='../images/over.jpg'
this.src='../images/out.jpg'分析上面的代码,我们发现,这其实是在给一个对象this的属性src赋值,但问题是我们并没有声明过一个叫this的对象!其实this对象是一个一直存在的一个对象,它不能被声明(this是关键字).这里,this就是指"这个",指这个标签!对于HTML中的元素,JavaScript会自动将其解析成一个对象.对于下面的img标签,会解析成下面一个对象:
<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈" />
//注意,实际上this是不能手动赋值,也不能手动声明的,这里仅仅是演示
this = {
src:"https://www.jb51.net/images/stack_heap.jpg",
alt:"内存堆栈",
onclick:"alert('Hello!')",
tagName:"IMG"
};
//其实不止这些属性上面,img标签会被解析成一个对象,具有src,alt等属性,src,alt属性是我们写在HTML里面的,而tagName则是系统自动生成的,它表示标签的标签名!我们可以用下面的代码进行测试:
<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈" />自然,我们也可以修改它的值,于是翻转图象的效果就这样成功了
对于这样的行内事件绑定,有一些注意点.
<head>
<script>
function myFn() {
alert("图象加载完成了!");
}
</script>
</head>
//.............若干若干代码之后
<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈" />//当图象加载成功时执行一个函数
上面的代码执行是没问题的,然而将顺序翻转一下(script可以放在任何合法的地方)
<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈" />//当图象加载成功时执行一个函数
//.............若干若干代码之后
<script>
function myFn() {
alert("图象加载完成了!");
}
</script>HTML页面按照从上往下的顺序加载执行,当图象加载成功后,就去执行onload里的内容(一个自定义函数),但由于script标签在下面若干代码之后,所以还没被加载,因此会出错"myFn is undefined";这就是为什么要将script标签放在head部分的原因,因为head在body前面,当body里的元素加载完成时,head中的script肯定加载完成了
但后来有了XHTML,有了"三层分离",W3C推出了DOM2,我们需要使用另一种方式绑定事件,获取HTML页面元素.再以上面的图像为例:
<head>
<script>
var img = document.getElementById("myImg");//我们通过ID来获取它
//document.getElementById方法有个参数,一个字符串ID
//然后,img就表示了那个图像标签对象
img.onclick = myFn;
/*我们不是把JavaScript代码以字符串符值给它的onclick属性
而是直接赋值给它一个函数名
你也会说,为什么不是img.onclick=myFn();
因为现在是在JavaScript代码区域中
加"()"表示执行这个函数,然后将这个函数的返回值赋给了img.onclick*/
function myFn() {
alert("图象加载完成了!");
}
</script>
</head>
//.......
<img src="https://www.jb51.net/images/stack_heap.jpg" alt="内存堆栈" />
//我们不再加onclick属性了,而是给它起了个ID
但上面的代码执行了仍会出错,因为HTML从上往下加载,当加载到script时,body部分在下面,还没有被加载,而JavaScript在浏览加载到时就会自动执行.这时,页面上的ID为myImg的img还没被加载到,所以会出错;document.getElementById方法需要一个字符串形式的ID,而如果页面上没有ID为这个的元素,它则会返回null(空对象);而在下面一行,img.onclick这一句使用了一个空对象,所以会在这里出错!至于解决方法,其实只是将传统的行内事件绑定的script位置反过来放.将script放在所以HTML元素后面!