一,JavaScript的监听事件
三个部分:事件源(div),事件(点击),监听器(function)
1)event 事件对象
属性 type(事件类型) clientX(事件发生的坐标x)clientY(y)
2)<div id="test" οnclick="f(this);">HelloWorld</div>
把当前发生事件的事件源对象传递到函数中
标准的使用方式
1)html组件
2)javascript的function
3)html组件中绑定一个事件,触发function执行οnclick="f(this);"
一般性事件
οnclick=“f();” 单击事件
ondblclick 双击事件
onmousedown 鼠标点下去
onmousemove 鼠标移动
onmouseout 鼠标移出
onmouseover 鼠标移入
onmouseup 鼠标抬起来
body相关事件
οnlοad=“fun();” 页面加载时触发该函数
onscroll 页面滚动时触发
onresize 页面调整大小时触发
form表单相关事件
onblur:当前元素失去焦点触发
onchange:当前元素失去焦点并且值发生改变时触发
onfocus:获得焦点时触发
onsubmit:表单提交时触发(form标签中)
οnsubmit="return test2();" test2函数中有返回值,true/false代表是否提交数据
二.DOM编程
通过document对象获取,文档的节点(标签)
Dom中常见的函数
1)document.getElementById(“id”); 返回一个元素
2)document.getElementsByName("name"); 返回一组数据 arr
3)document.getElementsByTagName("tagName");返回一组数据
样式修改
css:background-image
js:backgroundImage
常见的属性
1)this代表当前的标签对象
2)innerHTML 标签体内容
3)e.childNodes 获得子节点
4)e.nodeValue 获得节点的内容
5)e.firstChild 获得第一个子节点
6)e.lastChild 获得最后一个子节点
7)e.parentNode 获得父节点
Dom结构修改的方法
1)createElement("标签名称");
2)removeChild(被删除子标签);
3)replaceChild(新标签,旧标签);
4)createTextNode("文本内容");
5)appendChild(子节点对象);
表单的方法 验证
form.submit();手动提交表达
input.select();文本处于选中
input.focus();使光标落入文本框中
三,BOM编程
常见的方法
1)window.open("url");
2)window.close();关闭浏览器窗口
3)window.setTimeOut(fun,time);重复调用方法
4)window.location.href="table.html";