8月14号=》401页-405页
15.1.2 绑定DOM对象属性
绑定到DOM对象属性时,开发者无须修改HTML元素的代码,二是将事件处理函数放在JavaScript脚本中绑定。
代码示范:
//脚本代码
document.getElementById("testBtn").onclick = test;
var test = function()
{
alert("绑定测试");
}
//HTML代码
<button id="testBtn">测试</button>
点击测试按钮将会弹出“绑定测试”对话框。
标准的HTML文档控件支持的事件及对应描述
| 事件 | 对应的含义 | 支持该事件的HTML标签 |
| onabort | 图片加载被中断 | <img> |
| onblur | 当某个HTML元素失去焦点时触发该事件 |
<button>、<input>、<label>、<select>、<textarea>、 <body> |
| onchange | 当表单域的值被修改时触发 | <input>、<select>、<textarea> |
| onclick | 单击某个元素时触发 | 大多数可显示的标签 |
| ondblclick | 双击某个元素时触发 | 大多数可显示的标签 |
| onerror | 图片加载出错时触发 | <img> |
| onfocus | 当某个标签得到焦点时触发 |
<button>、<input>、<label>、<select>、<textarea>、 <body> |
| onkeydown | 当焦点在当前元素上面,按下键盘的某个键时触发 | 表单控件标签和<body>标签 |
| onkeypress | 当焦点在当前元素上面,按下键盘的某个键时触发 | 表单控件标签和<body>标签 |
| onkeyup | 当焦点在当前元素上面,并且松开了键盘的某个键时触发 | 表单控件标签和<body>标签 |
| onload | 当某个对象被装载完毕时触发 | <body>、<iframe>、<img> |
| onmousedown | 当焦点停留在当前元素上面,并且按下鼠标键时触发 | 大多数可显示的标签 |
| onmousemove | 当鼠标在当前元素上面,并且鼠标在当前元素上面移动时触发 | 大多数可显示的标签 |
| onmouseout | 当鼠标移出某个元素时触发,即鼠标一开始停留在元素上面 | 大多数可显示的标签 |
| onmouseover | 当鼠标移动到该元素上面时触发 | 大多数可显示的标签 |
| onmouseup | 当焦点在当前元素上面,并且松开鼠标键时触发 | 大多数可显示的标签 |
| onreset | 当用户重置表单时触发 | <form> |
| onresize | 当窗口大小被改变时触发 | <body>、<iframe> |
| onselect | 当用户选择文本框或文本域的某段文字时触发 | <input>、<textarea> |
| onsubmit | 当表单提交时触发,通常通过单击表单的“提交”按钮触发 | <form> |
| onunload | 当某个对象从窗口或框架中卸载完毕时触发 | <body>、<iframe>、<img> |
15.1.3 事件处理函数和关键字this
JavaScript脚本通常处于window对象下运行,如果JavaScript脚本中使用this关键字,则通常引用到window本身。
代码示范:
//脚本代码
window.name = "测试窗口";
var test = function()
{
alert(this.name);
}
//HTML代码
<button onclick="test()">测试</button>
//点击测试按钮将会弹出“测试窗口”对话框。
15.1.4 使用返回值改变默认行为
HTML元素大都包含了自己的默认行为。例如,单击超链接将导致页面导航到超链接所指的页面,单击表单的“提交”按钮将导致表单提交...等等
但如果为这些元素增加对应的事件处理函数,将可以改变这种默认行为。
例如组织超链接导航,代码示范:
<a href="www.baidu.com" onclick="return false">导航</a>
该超链接绑定了onclick事件处理代码,该代码简单的返回false,这将阻止超链接的导航功能,所以点击该导航超链接页面将不会跳转。
浙公网安备 33010602011771号