前端随心记---------Javascript系列（第二节----函数.事件处理程序）

事件处理程序

1.操作元素的内容
文本框的内容: 元素.value
其他元素的内容：
box.innerHTML
//获取元素内容,包含所有子元素及文本内容.
//设置元素内容，会把所有内容全部覆盖,如果设置的内容中有标签，标签会解析。

2.操作元素的属性（行内属性）
3.操作元素的样式

特殊的属性操作：class
console.log(box.class);//class不能这样用
console.log(box.className);
box.className = "color";

操作元素的样式
console.log(box.style);//这里得到一个行内css样式表，是一个对象，这个对象中保存了所有的行内样式属性。
获取样式
//console.log(box.style.background);
//console.log(box.style.backgroundColor);
//console.log(box.style.color);
设置样式
//box.style.fontSize = "30px";
//box.style.fontFamily = "楷体";
获取所有样式文本
//console.log(box.style.cssText);//background: yellow; color: blue;
box.style.cssText = "color: green;font-family: '微软雅黑';font-size: 25px;";


小结:
处理元素的样式:
元素.style.样式""// 获取
元素.style.样式=值 ; //设置
处理元素的属性:
元素.属性; //获取
元素.属性=值 ; //设置
处理元素内容:
表单内容:
元素.value;// 获取;
元素.value=值 ; //设置;
标签内容:
元素.innerHTML; //获取
元素.innerHTML=值 ; //设置;

函数事件

窗口事件
window.onload 文档加载事件
window.onunload 窗口卸载事件
window.onscroll 窗口滚动条事件
鼠标事件
onclick 鼠标单击，鼠标按下并且抬起后触发的事件
ondblclick
onmousedown 鼠标按下
onmouseover 鼠标移入
onmouseout 鼠标移出
onmouseenter 鼠标移入
onmouseleave 鼠标移出
onmousewheel 鼠标中间滚轮事件
oncontextmenu 鼠标右击事件
键盘事件
onkeydown 键盘按下
onkeypress 键盘按下
onkeyup 键盘抬起
文本框事件
onchange 文本框内容发生改变并且失去焦点的时候触发的事件
onblur 失去焦点
onfocus 获取焦点
oninput 文本框内容发生改变
表单
onsubmit 表单提交事件

事件如何触发
js与html进行交互
选择器 通过某个对象中的某个方法来获取 元素
例:var box = document.getElementById("box");

事件的三要素
     ---事件源
     ---事件
     ---事件处理程序
　　获取元素对象
　　给元素对象添加(注册)一个对应事件(行为方式)
　　给事件赋值一个函数(功能实现)